有条件地禁用输入（Vue.js）

Question

我有一个输入：

<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 ，我需要禁用输入，否则应该启用和编辑。

更新：

这样做总是 启用 输入（无论我在数据库中有 0 还是 1）：

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

这样做总是 禁用 输入（无论我在数据库中有 0 还是 1）：

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

原文由 Zaffar Saffee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要删除 disabled 属性，您应该将其值设置为 false 。这需要是 false 的布尔值，而不是字符串 'false' 。

因此，如果 validated 的值是 1 或 0，则根据该值有条件地设置 disabled 属性。例如：

 <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>

原文由 asemahle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以有一个计算属性，它根据你需要的任何标准返回一个布尔值。

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

然后将您的逻辑放在计算属性中…

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

原文由 David Morrow 发布，翻译遵循 CC BY-SA 4.0 许可协议