在vuejs中使用for循环在选择选项中显示数据?

Question

<a-form-item label="Post" :colon="false">
<a-select
@change="changeValue"
placeholder="Select a value"
>
<a-select-option
v-for="(item, index) in value"
:value="index"
:key="item.name"
>{{ item.name }}</a-select-option>
</a-select>
</a-form-item>

const value = {
"post": {
"title_new": {
"name": "New",
"status": 1
},
"title_hot": {
"name": "Hot",
"status": 1
},
},
"product": {
"title_new": {
"name": "samsung",
"status": 1
},
"title_hot": {
"name": "iphone",
"status": 1
},
}
}
methods: {
changeValue(value) {
console.log(value); //result : post
}
}

我在vuejs中显示选择框中的值。我想当我点击事件@change="changeValue"时，我会得到两个键中的一个:title_new和title_hot。就像我上面的处理。我只得到关键是:post和product。告诉我你的想法。谢谢你

Answer 1

您只需将所选广播的值存储在变量中(例如post, product，…)。然后你可以通过value[radioValue]:

访问它们

<a-select-option
v-for="(item, index) in value[radioValue]"
:value="index"
:key="item.name"
>
{{ item.name }}
</a-select-option>