Vue js 3 Passing dynamic model value inside a v-for

Question

I'm working on a product page which has a gallery and this gallery needs to change when different options is selected.

to simplify, imagine this is the gallery:

<swiper-slide v-for="image in product.option" :key="image.id">

and I've radio buttons like this:

<RadioGroup v-model="optionChoice">

I need to somehow pass optionChoice to v-for so it dynamically change when user selects an option. something like this:

<swiper-slide v-for="image in product.{{optionChoice}}" :key="image.id">

Can someone guide me?

Answer 1

In JavaScript, bracket notation is used to reference an object property by a dynamic key:

const product = { name: 'john', age: 100 }

let optionChoice = 'name'
console.log(product[optionChoice]) // => 'john'

optionChoice = 'age'
console.log(product[optionChoice]) // => 100

The v-for value is a JavaScript expression, so the same solution applies:

<swiper-slide v-for="image in product[optionChoice]" :key="image.id">
                                     👆           👆

demo