[解決済み] 条件付きで入力を無効にする(Vue.js)

質問

入力があります。

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

解決方法は？

無効化されたプロップを削除するには、その値を 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>