Vue seems to be reusing child component when only one at a time is showing

后端 未结 2 1273
佛祖请我去吃肉
佛祖请我去吃肉 2021-01-14 06:21

I am rendering child components in a v-for loop, but only showing one at a time. I assumed that Vue will create a seperate/new child component for each render.

But

相关标签:
2条回答
  • 2021-01-14 06:35

    Try to use v-show instead of v-if: v-show= "question.id === currentVisibleIndex"(triple equals is better).

    v-if will render only when that condition is met, v-show will render all the Answer components but will only show the one with currentVisibleIndex.

    You can move the this.selectedOption = null(selectedOption, actually) inside the data, that meaning that will be initialized with null. Another option is to use as prop and set the default return as null as well.

    0 讨论(0)
  • 2021-01-14 06:50

    Yes, reusing components and elements is expected, it's better for performance.

    To force Vue to create fresh instances, use a unique value for the key property, for example the question id:

    v-bind:key="question.id"
    
    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题