☰

条件付きで入力を無効にする (Vue.js) 質問する

tag-icon • tag-icon javascript html forms vue.js input
条件付きで入力を無効にする (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いずれかになりますが、データベースにどのような値が格納されているかに関係なく、入力は常に無効になります。01

の場合は入力を無効にする必要があります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

無効なプロパティを削除するには、その値を に設定する必要があります。これは、文字列 ではなく、falseのブール値である必要があります。false'false'

したがって、の値がvalidated1 または 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>

おすすめ記事