Vue2：既存の入力要素に反応しない

Question

フォームフィールドを異なるフィールド設定に応じて通過させる検証を作成しようとしています。この例では、location2入力が存在しないため、Vueの有効なメソッドはtrueを返しません。 私のフォームはサーバー側の動的なので、私は異なるフィールドの2つのセットを取得します。時にはlocation2があり、Vue内でチェックする必要があり、時にはそこにないことがあります。チェックしないでください。私はVueの中に何かがあるかどうかわかりません。私はこれを行うことができます。フィールドの存在に応じて、私はいつもoutside Vue.set(App, 'location2', 'Test');を使ってみましたが、あまりうまくありません。ご入力のname属性は常にあなたのVueコンポーネントのデータの特性に一致するようにしようとしている場合、私は

<div id="app"> 
    <input name="location" v-model="location" value="" type="text" required="required"> 
    <br /> 
    <!-- <input name="location2" v-model="location2" value="" type="text"required="required"> --> 
    <p> 
    Location: {{location}} 
    <br /> Location2: {{location2}} 
    </p> 
    <button type="submit" :disabled="valid()">Go</button> 
</div> 

:)これは理解を願っ

は

new Vue({ 
    el: '#app', 
    data: { 
    location: '', 
    location2: '' 
    }, 
    methods: { 
    valid: function() { 

     return !(this.location != '' && this.location2 != ''); 
    } 
    }, 
}) 

https://jsfiddle.net/bf1ge2xt/

Answer 1

をSD validメソッドは、コンポーネント内の各inputを通過し、プロパティwit時間と同じ名前は有効です。

valid: function() { 
    let inputs = this.$el.querySelectorAll('input'); 
    for (let i = 0; i < inputs.length; i++) { 
    if (this[inputs[i].name] == '') { 
     return false; 
    } 
    } 
    return true; 
} 

Here's a working fiddle.

Answer 2

は、あなただけのthis.location2が設定されているかどうかを確認するためのチェックを行うことができますか？

new Vue({ 
    el: '#app', 
    data: { 
    location: '', 
    location2: '' 
    }, 
    methods: { 
    valid: function() { 
     if (this.location2) { 
     return !(this.location != '' && this.location2 != ''); 
     } 
     return this.location == ''; 
    } 
    }, 
}) 

フィドル：https://jsfiddle.net/gratiafide/g92Lscu4/1/