web-dev-qa-db-ja.com

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

これを常にdisabled入力として行います（データベースに0または1があっても関係ありません）。

<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="validated ? disabled : ''">
javascripthtmlformsvue.js
180
Zaffar Saffee

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

したがって、validatedの値が1または0のいずれかである場合は、その値に基づいてdisabledプロップを条件付きで設定します。例えば。：

<input type="text" :disabled="validated == 1">

これは例です 。

333
asemahle

必要な基準に応じてブール値を返す計算プロパティがあります。

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

それから計算されたプロパティにあなたのロジックを入れてください...

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

難しくありません、これをチェックしてください。

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

jsfiddle

20
Sebastiao Marcos

無効な属性にはブール値が必要です。

<input :disabled="validated" />

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

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

1 is in fact considered to be true

特に注意してください：<input :disabled="!!validated" />

この二重否定は、0または1のfalseyまたはtruthy値をfalseまたはtrueに変換します

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

また、あなたの番号1または0が文字列'1'または'0'ではなく、必ず数字として送られていることを確認するために、チェックする値の前に+ eg <input :disabled="!!+validated"/>これは、数値の文字列を数値に変換しますeg

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

14
Francis Leigh

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

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

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

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

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

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

（1） 入力の "disabled"属性は ブール値ではない 属性です。
属性の単なる presence は、 入力が無効であることを意味します。

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

（@connexoさん、ありがとうございます... vuejsの入力テキストにdisabled属性を追加する方法？ ）

（2） さらに、DOMタイミングの再レンダリングに関する問題がありました。トグルしてもDOMは更新されませんでした。

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

Vue.jsのドキュメントから： https://vuejs.org/v2/guide/reactivity.html

解決策は次のとおりです。

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

これを試して

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

ヴューjs

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

この記事の執筆時点では、ES6セット/マップは私が言うことができる限り反応的ではないようです。

0
omarjebari