Vue js 3在v-for中传递动态模型值

Question

我正在处理一个有库的产品页面，当选择不同的选项时，该库需要更改。

为了简化，假设这是画廊：

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

我有这样的单选按钮：

<RadioGroup v-model="optionChoice">

我需要以某种方式将optionChoice传递给v-for，这样当用户选择一个选项时，它就会动态更改。像这样的东西：

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

有人能给我指路吗？

Answer 1

在JavaScript中，括号符号用于通过动态键引用对象属性：

const product = { name: 'john', age: 100 }
let optionChoice = 'name'
console.log(product[optionChoice]) // => 'john'
optionChoice = 'age'
console.log(product[optionChoice]) // => 100

v-for值是一个JavaScript表达式，因此应用相同的解决方案：

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

演示