Cách tắt đầu vào có điều kiện trong vue.js

Tôi có một đầu vào:

<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="validated ? '' : disabled">

và trong thành phần Vue.js của tôi, tôi có:

..
..
ready() {
        this.form.name = this.store.name;
        this.form.validated = this.store.validated;
    },
..

validatedlà một boolean, nó có thể là 0hoặc 1, nhưng cho dù giá trị nào được lưu trữ trong cơ sở dữ liệu, đầu vào của tôi luôn bị tắt.

Tôi cần đầu vào bị vô hiệu hóa nếu falsekhông, nó nên được kích hoạt và có thể chỉnh sửa.

Cập nhật:

Làm điều này luôn cho phép đầu vào (bất kể tôi có 0 hoặc 1 trong cơ sở dữ liệu):

<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="validated ? '' : disabled">

Làm điều này luôn vô hiệu hóa đầu vào (bất kể tôi có 0 hoặc 1 trong cơ sở dữ liệu):

<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="validated ? disabled : ''">

Để loại bỏ prop bị vô hiệu hóa, bạn nên đặt giá trị của nó thành false. Điều này cần phải là giá trị boolean cho false, không phải chuỗi 'false'.

Vì vậy, nếu giá trị cho validatedlà 1 hoặc 0, thì có điều kiện đặt disabledprop dựa trên giá trị đó. Ví dụ:

<input type="text" :disabled="validated == 1">

Đây là một ví dụ.

var app = new Vue({
  el: '#app',

  data: {
    disabled: 0,
  },
}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="disabled = (disabled + 1) % 2">Toggle Enable</button>
  <input type="text" :disabled="disabled == 1">
    
  <pre>{{ $data }}</pre>
</div>

bạn có thể có một thuộc tính được trả về boolean phụ thuộc vào bất kỳ tiêu chí nào bạn cần.

<input type="text" :disabled=isDisabled>

sau đó đặt logic của bạn vào một thuộc tính được tính toán ...

computed: {
  isDisabled() {
    // evaluate whatever you need to determine disabled here...
    return this.form.validated;
  }
}

Không khó, kiểm tra cái này.

<button @click="disabled = !disabled">Toggle Enable</button>
<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="disabled">

jsfiddle

Thuộc tính bị vô hiệu hóa của bạn yêu cầu giá trị boolean:

<input :disabled="validated" />

Lưu ý cách tôi chỉ kiểm tra nếu validated- Cái này sẽ hoạt động như 0 is falsey... vd

0 is considered to be false in JS (like undefined or null)

1 is in fact considered to be true

Để cẩn thận hơn, hãy thử: <input :disabled="!!validated" />

Phủ định đôi này quay falseyhoặc truthygiá trị 0hoặc 1đểfalse hoặctrue

đừng tin tôi đi vào bảng điều khiển của bạn và gõ !!0hoặc!!1 :-)

Ngoài ra, để đảm bảo số của bạn 1hoặc 0chắc chắn xuất hiện dưới dạng Số chứ không phải Chuỗi '1'hoặc '0'trước giá trị bạn đang kiểm tra với một +ví dụ<input :disabled="!!+validated"/> điều này biến một chuỗi số thành Số, ví dụ:

+1 = 1 +'1' = 1 Giống như David Morrow đã nói ở trên, bạn có thể đưa logic điều kiện của mình vào một phương thức - điều này mang lại cho bạn mã dễ đọc hơn - chỉ cần trả về phương thức mà bạn muốn kiểm tra.

Bạn có thể thao tác :disabledthuộc tính trong vue.js .

Nó sẽ chấp nhận một boolean, nếu nó đúng , thì đầu vào bị vô hiệu hóa, nếu không nó sẽ được kích hoạt ...

Một cái gì đó giống như có cấu trúc như dưới đây trong trường hợp của bạn chẳng hạn:

<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? false : true">

Cũng đọc điều này dưới đây:

Vô hiệu hóa các yếu tố đầu vào thông qua biểu thức JavaScript

Bạn có thể vô hiệu hóa các yếu tố đầu vào nội tuyến bằng một biểu thức JavaScript. Cách tiếp cận nhỏ gọn này cung cấp một cách nhanh chóng để áp dụng logic điều kiện đơn giản. Ví dụ, nếu bạn chỉ cần kiểm tra độ dài của mật khẩu, bạn có thể xem xét làm một cái gì đó như thế này.

<h3>Change Your Password</h3>
<div class="form-group">
  <label for="newPassword">Please choose a new password</label>
  <input type="password" class="form-control" id="newPassword" placeholder="Password" v-model="newPassword">
</div>

<div class="form-group">
  <label for="confirmPassword">Please confirm your new password</label>
  <input type="password" class="form-control" id="confirmPassword" placeholder="Password" v-model="confirmPassword" v-bind:disabled="newPassword.length === 0 ? true : false">
</div>

Bạn có thể tạo một thuộc tính được tính toán và bật / tắt bất kỳ loại biểu mẫu nào theo giá trị của nó.

<template>
    <button class="btn btn-default" :disabled="clickable">Click me</button>
</template>
<script>
     export default{
          computed: {
              clickable() {
                  // if something
                  return true;
              }
          }
     }
</script>

Thử cái này

 <div id="app">
  <p>
    <label for='terms'>
      <input id='terms' type='checkbox' v-model='terms' /> Click me to enable
    </label>
  </p>
  <input :disabled='isDisabled'></input>
</div>

vue js

new Vue({
  el: '#app',
  data: {
    terms: false
  },
  computed: {
    isDisabled: function(){
        return !this.terms;
    }
  }
})

Để chuyển đổi thuộc tính bị vô hiệu hóa của đầu vào rất phức tạp. Vấn đề đối với tôi là gấp đôi:

(1) Hãy nhớ rằng: thuộc tính "bị vô hiệu hóa" của đầu vào KHÔNG phải là thuộc tính Boolean .
Sự hiện diện đơn thuần của thuộc tính có nghĩa là đầu vào bị vô hiệu hóa.

Tuy nhiên, những người tạo Vue.js đã chuẩn bị điều này ... https://vuejs.org/v2/guide/syntax.html#Attribution

(Cảm ơn @connexo vì điều này ... Làm cách nào để thêm thuộc tính bị vô hiệu hóa trong văn bản đầu vào trong vuejs? )

(2) Ngoài ra, có một vấn đề tái hiện thời gian DOM mà tôi đang gặp phải. DOM không cập nhật khi tôi cố gắng chuyển trở lại.

Trong một số trường hợp nhất định, "thành phần sẽ không kết xuất lại ngay lập tức. Nó sẽ cập nhật trong 'tick' tiếp theo."

Từ tài liệu của Vue.js: https://vuejs.org/v2/guide/reactivity.html

Giải pháp là sử dụng:

this.$nextTick(()=>{
    this.disableInputBool = true
})

Quy trình làm việc đầy đủ hơn:

<div @click="allowInputOverwrite">
    <input
        type="text"
        :disabled="disableInputBool">
</div>

<button @click="disallowInputOverwrite">
    press me (do stuff in method, then disable input bool again)
</button>

<script>

export default {
  data() {
    return {
      disableInputBool: true
    }
  },
  methods: {
    allowInputOverwrite(){
      this.disableInputBool = false
    },
    disallowInputOverwrite(){
      // accomplish other stuff here.
      this.$nextTick(()=>{
        this.disableInputBool = true
      })
    }
  }

}
</script>

Có thể sử dụng điều kiện thêm này.

  <el-form-item :label="Amount ($)" style="width:100%"  >
            <template slot-scope="scoped">
            <el-input-number v-model="listQuery.refAmount" :disabled="(rowData.status !== 1 ) === true" ></el-input-number>
            </template>
          </el-form-item>

Hãy nhớ rằng Bộ / Bản đồ ES6 dường như không phản ứng theo như tôi có thể nói, tại thời điểm viết.