有条件地禁用输入 (Vue.js) [英] Disable input conditionally (Vue.js)

问题描述

我有一个输入:

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

....准备好() {this.form.name = this.store.name;this.form.validated = this.store.validated;},..

validated 是一个 boolean，它可以是 0 或 1，但不管是什么值存储在数据库中，我的输入总是被禁用.

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

更新:

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

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

解决方案

要删除禁用的道具，您应该将其值设置为 false.这需要是 false 的布尔值，而不是字符串 'false'.

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

这是一个例子.

var app = new Vue({el: '#app',数据: {禁用:0}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></脚本><div id="应用程序"><button @click="disabled = (disabled + 1) % 2">切换启用</button><input type="text" :disabled="disabled == 1"><pre>{{ $data }}</pre>

I have an input:

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

and in my Vue.js component, I have:

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

validated being a boolean, it can be either 0 or 1, but no matter what value is stored in the database, my input is always disabled.

I need the input to be disabled if false, otherwise it should be enabled and editable.

Update:

Doing this always enables the input (no matter I have 0 or 1 in the database):

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

Doing this always disabled the input (no matter I have 0 or 1 in the database):

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

解决方案

To remove the disabled prop, you should set its value to false. This needs to be the boolean value for false, not the string 'false'.

So, if the value for validated is either a 1 or a 0, then conditionally set the disabled prop based off that value. E.g.:

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

Here is an example.

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>

这篇关于有条件地禁用输入 (Vue.js)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！