web-dev-qa-db-ja.com

Vueの特定の値に基づいて入力を読み取り専用にする方法は？

Vueデータに基づいて入力フィールドを読み取り専用にする方法は？

例えば：

<select class="form-control" 
        id="selectCategory" 
        :disabled="cat_id >= 
            1" 
        name="cat_id">

フィールドを読み取り専用にしますが、無効にしません。どうすればこれを達成できますか？

javascriptformsvue.js
13
Neha

HTML仕様に従って、HTMLのselectタグには読み取り専用属性がないことに注意してください。

ただし、一般的には、次のようなものを使用します。

<input class="form-control" id="selectCategory" :readonly="cat_id >= 1">

基本的に、ドキュメントには、属性値がfalseと評価された場合、属性が省略されると書かれています。詳細については here を参照してください。

18
P3trur0

次のようなことができます：

<input v-bind:readonly="isReadOnly">
2
John Rajan

パスワード変更フォーム用のフォームを作成中にこの問題に遭遇し、ブラウザーがすべてを自動補完しようとしていることに遭遇しました。これにより、オートコンプリートが実行されなくなり、ニーズに合わせて値を変更する方法も提供されます。
何らかの理由でtrueのv-bind：readonlyプロパティを追加すると、readonly = "readonly"に戻ります
これは、focusoutで読み取り専用プロパティを削除して再追加する現在動作中の例です。

VueテンプレートHTML

<input type="password" v-model="user.password" placeholder="Password" @focusin="toggleReadonly" @focusout="toggleReadonly" :readonly="true">

方法

toggleReadonly(event){
          event.preventDefault()
          if(event.target.getAttribute('readonly') == 'readonly'){
              event.target.removeAttribute('readonly')
          }
          else{
              event.target.setAttribute('readonly', 'readonly')
         }
 }
0
MyEmpireOfDuctTape