Javascript 有条件地禁用输入(Vue.js)

发布于06月29日

我有一个建议:

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

在我的Vue里.js组件，我有:

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

validated是boolean，可以是0或1，但无论数据库中存储了什么值，我的输入总是被禁用.

我需要输入被禁用，如果是false，否则它应该是启用和可编辑的.

更新:

这样做总是enables输入(无论我在数据库中是0还是1):

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

这样做总是disabled输入(无论我在数据库中是0还是1):

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

推荐答案

若要移除禁用的props ，应将其值设置为false.这需要是false的布尔值，而不是字符串'false'.

因此，如果validated的值为1或0，则根据该值有条件地设置disabledprops .例如.:

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

这里有一个例子.

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>