Vueのは、一度に一つだけが、私は子コンポーネントをレンダリングしていますV-用ループ

Question

を示したが、1度に1つしか表示されたときに子コンポーネントを再利用しているようです。私はVueが各レンダリングに対して別個の/新しい子コンポーネントを作成すると仮定しました。

は、しかし、それもアウトに変更された後、子コンポーネントの私のデータ値が持続するので、同じインスタンスを使用しているように見えます。

は今、私は..質問が変化したときに手動でデータ値をリセットするためにウォッチャーを作成していますが、それはハック感じています。

が、これは正常な動作ですか？

// Parent Component 
    <AnswerQuestion 
     v-for = "question in questions" 
     v-bind:question = "question" 
     v-if = "question.id == currentVisibleIndex" 
     v-on:questionAnswered = "questionAnswered" 
     > 
    </AnswerQuestion> 



    // Child Component 
    props: ["question"], 
    data() { 
    return { 
     options: options, 
     commentText: null 
    } 
    } 

    // what i am doing now, feels hacky 
    watch: { 
    question: function (newQuestion) { 
     this.selectedOption = null 
     this.commentText = null 
    } 
    }, 

Answer 1

はい、コンポーネントと要素を再利用することが予想されますが、パフォーマンスが向上します。

keyプロパティに一意の値を使用し、新鮮なインスタンスを作成するためにVueのを強制するためには、例えば質問ID：

v-bind:key="question.id" 

Answer 2

代わりにV-IFのVショーを使用してみてください：（トリプル等号が優れている）v-show= "question.id === currentVisibleIndex"。

は、その条件が満たされたときにのみレンダリングします。v-showは、すべてAnswerのコンポーネントをレンダリングしますが、currentVisibleIndexのコンポーネントのみを表示します。

this.selectedOption = null（実際にはselectedOption）をdataの中に移動することができます。その意味はnullで初期化されます。もう一つのオプションはpropとして使用し、デフォルトの戻り値をnullとして設定することです。