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中，bracket notation用于通过动态键引用对象属性：

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

demo

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

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

vue.js

v-for

v-model