親からのコンポーネントのデータ属性を更新する - Vue2 js

Question

独自のエラー状態を追跡する動的なVueコンポーネントを作成しようとしています。 親コンポーネントで検証を実行する必要があり、親検証メソッドは子コンポーネントのエラー状態を更新する必要があります。 この段階では、いくつの子コンポーネントが生成されるかわからないので、経由する小道具を追跡するのが難しくなります。レンダリングされる子コンポーネントの数は、API呼び出しによって動的に決定されます。

私がこれまでにこれを達成するために見つけた唯一の方法は、関数のパラメータを介してコンポーネントインスタンスを親に渡し、親コンポーネントで直接データ属性を更新することです。

私の質問はこれです - コンポーネントインスタンスを関数パラメータとして渡すよりも良い方法がありますか？

HTML

<div id="app"> 
    <number-only v-for="n in 8" 
       v-on:update="checkNumber"></number-only> 
</div> 

CSS

input { 
    display: block; 
    margin: 5px; 
} 
input.error { 
    border: 1px solid #ff0000; 
    background-color: 
} 

はJavaScript

Vue.component('numberOnly', { 
    template: `<input type="text" 
       :class="{error: hasError}" 
       @keyup="update($event.target.value)" 
       />` 
    , 
    data() { 
    return { 
     hasError: false 
    } 
    }, 
    methods: { 
     update(val){ 
      this.$emit('update', { 
      value: val, 
      instance: this 
      }); 
     } 
     } 
}); 

new Vue({ 
    el: '#app', 
    components: ['numberOnly'], 
    methods: { 
    checkNumber(args){ 
     if(isNaN(args.value)){ 
     args.instance.hasError = true; 
     return; 
     } 
     args.instance.hasError = false; 
    } 
    } 
}); 

ここで働いてCodepenの例です： https://codepen.io/martiensk/pen/wroOLN

Answer 1

あなたは、関数のパラメータとしてコンポーネントのインデックスを渡すことができます。

Vue.component('numberOnly', { 
    props: { 
    index: Number, 
    error: { 
     default: false 
    } 
    }, 
    template: `<input type="text" 
       :class="{error: error}" 
       @keyup="update($event.target.value)" 
       />` 
    , 
    methods: { 
    update(val) { 
     this.$emit('update', val, this.index); 
    } 
    } 
}); 

とコンポーネントのパラメータとしてインデックスとエラーを与える：

HTML

<number-only v-for="n in 8" 
      :index="n" 
      :error="hasError[n]" 
      v-on:update="checkNumber"> 

JavaScriptの

new Vue({ 
    el: '#app', 
    components: ['numberOnly'], 
    data() { 
    return { 
     hasError: [], 
    } 
    }, 
    methods: { 
    checkNumber(val, index){ 
     if(isNaN(val)) 
     this.$set(this.hasError, index, true); 
     else 
     this.$set(this.hasError, index, false); 
    } 
    } 
}); 

Code example

それとも直接完全に働いた

<number-only v-for="n in 8" 
      :index="n" 
      :class="{'error': hasError[n]}" 
      v-on:update="checkNumber">