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になりますが、データベースに格納されている値に関係なく、私の入力は常に無効になっています。

ifの場合は入力を無効に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>

必要な条件に応じてブール値を返す計算されたプロパティを持つことができます。

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

次に、計算されたプロパティにロジックを配置します...

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

難しくありません。これを確認してください。

<button @click="disabled = !disabled">Toggle Enable</button>
<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="disabled">

jsfiddle

無効化された属性にはブール値が必要です：

<input :disabled="validated" />

次の場合にのみチェックしたことに注意してくださいvalidated-これは0 is falsey... として機能するはずです

0 is considered to be false in JS (like undefined or null)

1 is in fact considered to be true

細心の注意を払うために： <input :disabled="!!validated" />

この二重否定ターンfalseyまたはtruthy値の0か1にfalseかtrue

私を信じないの？コンソールに移動して、!!0または!!1:-) と入力します

また、必ず自分の番号を作成する1か、0間違いなくナンバーとないとしてを通じて来ている文字列'1'または'0'あなたがチェックしている値プリペンド+例えば<input :disabled="!!+validated"/>数などには、このターン数の文字列を

+1 = 1 +'1' = 1 上記のDavid Morrowが言ったように、条件付きロジックをメソッドに入れることができます。これにより、コードが読みやすくなります。チェックしたい条件をメソッドから返すだけです。

vue.jsで:disabled属性を操作できます。

trueの場合、ブール値を受け入れます、その後、入力は、それ以外の場合は有効になり、無効になります...

あなたの場合、例えば以下のような構造のようなもの：

<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? false : true">

以下もお読みください：

JavaScript式による入力要素の条件付き無効化

JavaScript式を使用して、インラインで入力要素を条件付きで無効にすることができます。このコンパクトなアプローチにより、単純な条件付きロジックをすばやく適用できます。たとえば、パスワードの長さのみを確認する必要がある場合は、このようなことを検討することができます。

<h3>Change Your Password</h3>
<div class="form-group">
  <label for="newPassword">Please choose a new password</label>
  <input type="password" class="form-control" id="newPassword" placeholder="Password" v-model="newPassword">
</div>

<div class="form-group">
  <label for="confirmPassword">Please confirm your new password</label>
  <input type="password" class="form-control" id="confirmPassword" placeholder="Password" v-model="confirmPassword" v-bind:disabled="newPassword.length === 0 ? true : false">
</div>

計算されたプロパティを作成し、その値に従って任意のフォームタイプを有効/無効にすることができます。

<template>
    <button class="btn btn-default" :disabled="clickable">Click me</button>
</template>
<script>
     export default{
          computed: {
              clickable() {
                  // if something
                  return true;
              }
          }
     }
</script>

これを試して

 <div id="app">
  <p>
    <label for='terms'>
      <input id='terms' type='checkbox' v-model='terms' /> Click me to enable
    </label>
  </p>
  <input :disabled='isDisabled'></input>
</div>

Vue js

new Vue({
  el: '#app',
  data: {
    terms: false
  },
  computed: {
    isDisabled: function(){
        return !this.terms;
    }
  }
})

入力のdisabled属性を切り替えるのは驚くほど複雑でした。私にとっての問題は2つありました。

（1） 注意：入力の「無効」属性はブール属性ではありません。属性
の単なる存在は、入力が無効であることを意味します。

ただし、Vue.jsの作成者はこれを準備しています... https://vuejs.org/v2/guide/syntax.html#Attributes

（@connexoに感謝します... vuejsの入力テキストに無効化された属性を追加する方法？）

（2）さらに、私が抱えていたDOMタイミングの再レンダリングの問題がありました。元に戻そうとしたときに、DOMが更新されていませんでした。

特定の状況では、「コンポーネントはすぐには再レンダリングされません。次の「ティック」で更新されます。」

Vue.jsドキュメントから： https

解決策は使用することでした：

this.$nextTick(()=>{
    this.disableInputBool = true
})

より完全なワークフローの例：

<div @click="allowInputOverwrite">
    <input
        type="text"
        :disabled="disableInputBool">
</div>

<button @click="disallowInputOverwrite">
    press me (do stuff in method, then disable input bool again)
</button>

<script>

export default {
  data() {
    return {
      disableInputBool: true
    }
  },
  methods: {
    allowInputOverwrite(){
      this.disableInputBool = false
    },
    disallowInputOverwrite(){
      // accomplish other stuff here.
      this.$nextTick(()=>{
        this.disableInputBool = true
      })
    }
  }

}
</script>

この追加条件を使用できます。

  <el-form-item :label="Amount ($)" style="width:100%"  >
            <template slot-scope="scoped">
            <el-input-number v-model="listQuery.refAmount" :disabled="(rowData.status !== 1 ) === true" ></el-input-number>
            </template>
          </el-form-item>

執筆時点では、ES6セット/マップは、私が知る限り、反応がないように見えます。