如何在vue.js中有条件地禁用输入 [英] How to disable input conditionally in vue.js

问题描述

我有一个输入内容:

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

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

and in my Vue.js component, I have:

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

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

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.

如果false，我需要禁用输入，否则应将其启用并进行编辑.

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

更新:

始终执行此操作启用(无论我的数据库中有0还是1):

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

始终执行此操作禁用(无论我的数据库中有0还是1):

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 : ''">

推荐答案

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

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

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

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

这里是一个例子.

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