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

javascript html input forms vue.js

2022-08-29 23:25:18

我有一个输入：

<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作为一个，它可以是 or ，但无论数据库中存储什么值，我的输入总是被禁用。boolean01

如果，我需要禁用输入，否则它应该被启用和编辑。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 : ''"
/>

答案 1

要删除禁用的 prop，应将其值设置为。这需要是的布尔值，而不是字符串。falsefalse'false'

因此，如果的值为 1 或 0，则根据该值有条件地设置 prop。例如：validateddisabled

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

答案 2

您可以有一个计算属性，该属性根据您需要的任何条件返回布尔值。

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

然后将逻辑放在计算属性中...

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

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

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