javascript - 如何在vue.js中有条件地禁用输入(How to disable input conditionally in vue.js)

Question

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:(在我的Vue.js组件中，我有：) .. .. 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.(validated为boolean ，可以为0或1 ，但是无论数据库中存储了什么值，我的输入始终被禁用。) I need the input to be disabled if false , otherwise it should be enabled and editable.(如果为false ，则需要禁用输入，否则应将其启用并进行编辑。) Update:(更新：) Doing this always enables the input (no matter I have 0 or 1 in the database):(这样做总是启用输入（无论数据库中有0还是1）：) <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):(这样做总是禁用输入（无论我的数据库中有0还是1）：) <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? disabled : ''">   ask by Zaffar Saffee translate from so

Answer 1

To remove the disabled prop, you should set its value to false .(要删除禁用的道具，应将其值设置为false 。)

This needs to be the boolean value for false , not the string 'false' .(这需要是false的布尔值，而不是字符串'false' 。) So, if the value for validated is either a 1 or a 0, then conditionally set the disabled prop based off that value.(因此，如果已validated的值是1或0，则根据该值有条件地设置disabled道具。) Eg:(例如：) <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>