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