如何解决如何在Vue中使用foreach值获取动态嵌套Select的数据
我正在动态填充数据并尝试显示它。
我正在获取Select元素的选项ID，但是我不确定如何获取父元素。
我尝试添加hidden输入，但是我无法获得价值，但我无法获得价值（已知问题）
new Vue({
el: "#app",data() {
return {
variations : [
{
"id":1,"variationName":"Material","created_at":"2020-08-20T16:23:18.000000Z","updated_at":"2020-08-20T16:23:18.000000Z","variant_options":[
{
"id":1,"variants_id":1,"variationOptionName":"Plastic","created_at":"2020-08-20T16:45:15.000000Z","updated_at":"2020-08-20T16:45:15.000000Z"
},{
"id":2,"variationOptionName":"Wood","created_at":"2020-08-20T16:45:45.000000Z","updated_at":"2020-08-20T16:45:45.000000Z"
},{
"id":3,"variationOptionName":"glass","created_at":"2020-08-20T16:46:23.000000Z","updated_at":"2020-08-20T16:46:23.000000Z"
},{
"id":4,"variationOptionName":"pvc","created_at":"2020-08-20T16:47:15.000000Z","updated_at":"2020-08-20T16:47:15.000000Z"
},{
"id":5,"variationOptionName":"unknown","created_at":"2020-08-20T16:47:58.000000Z","updated_at":"2020-08-20T16:47:58.000000Z"
}
]
},{
"id":2,"variationName":"color","created_at":"2020-08-20T16:25:14.000000Z","updated_at":"2020-08-20T16:25:14.000000Z","variant_options":[
]
},{
"id":3,"variationName":"type","created_at":"2020-08-20T16:25:45.000000Z","updated_at":"2020-08-20T16:25:45.000000Z","variant_options":[
{
"id":6,"variants_id":3,"variationOptionName":"working","created_at":"2020-08-20T16:48:44.000000Z","updated_at":"2020-08-20T16:48:44.000000Z"
}
]
}
],variationOptions: [],};
},mounted: function () {
for (let i = 0; i < this.variations.length; i++) {
this.variationOptions.push({
values: [],});
}
},methods: {},})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<table class="table">
<thead>
<tr>
<td>Variation Name</td>
<td>Variation Values</td>
</tr>
</thead>
<tbody>
<tr v-for="(items,index) in variations">
<td>{{items.variationName}}</td>
<td>
<select multiple class="form-control" id="exampleFormControlSelect2" v-model="variationOptions[index]['values']">
<option v-for="(variationOptions,index) in items.variant_options" :key="variationOptions.id" :value="variationOptions.id">{{variationOptions.variationOptionName}}</option>
</select>
</td>
{{variationOptions}}
</tr>
</tbody>
</table>
</div>
</div>我也遇到以下错误。
*Error in render: "TypeError: Cannot read property 'values' of undefined"*
我在哪里错了。如果您能抽出一点时间解释一下，我将不胜感激
更新：
我用values更新了item.id，并按预期获取了数据。
但是格式是
[ { "items": { "id": [] } },{ "items": { "id": [] } },{ "items": { "id": [] } } ]
如何从结果中删除项目和ID。
解决方法
我创建了一个对我来说更合乎逻辑的代码段：
-
它通过
variationName动态地构造选定的值（因此适用于任意数量的变体形式） -
可以将整个选定的
variant_options对象传递给select：
<option
v-for="(option,idxj) in item.variant_options"
:key="`options-${ idxi }-${ idxj }`"
:value="option.variationOptionName"
<!-- if you set it to :value="option",then the whole object is passed -->
>
{{ option.variationOptionName }}
</option>
new Vue({
el: "#app",computed: {
variationOptionsArray() {
return Object.values(this.variationOptions)
}
},data() {
return {
variations: [{
"id": 1,"variationName": "Material","created_at": "2020-08-20T16:23:18.000000Z","updated_at": "2020-08-20T16:23:18.000000Z","variant_options": [{
"id": 1,"variants_id": 1,"variationOptionName": "Plastic","created_at": "2020-08-20T16:45:15.000000Z","updated_at": "2020-08-20T16:45:15.000000Z"
},{
"id": 2,"variationOptionName": "Wood","created_at": "2020-08-20T16:45:45.000000Z","updated_at": "2020-08-20T16:45:45.000000Z"
},{
"id": 3,"variationOptionName": "glass","created_at": "2020-08-20T16:46:23.000000Z","updated_at": "2020-08-20T16:46:23.000000Z"
},{
"id": 4,"variationOptionName": "pvc","created_at": "2020-08-20T16:47:15.000000Z","updated_at": "2020-08-20T16:47:15.000000Z"
},{
"id": 5,"variationOptionName": "unknown","created_at": "2020-08-20T16:47:58.000000Z","updated_at": "2020-08-20T16:47:58.000000Z"
}
]
},{
"id": 2,"variationName": "color","created_at": "2020-08-20T16:25:14.000000Z","updated_at": "2020-08-20T16:25:14.000000Z","variationOptionName": "Orange","variants_id": 2,"variationOptionName": "Red",]
},{
"id": 3,"variationName": "type","created_at": "2020-08-20T16:25:45.000000Z","updated_at": "2020-08-20T16:25:45.000000Z","variant_options": [{
"id": 6,"variants_id": 3,"variationOptionName": "working","created_at": "2020-08-20T16:48:44.000000Z","updated_at": "2020-08-20T16:48:44.000000Z"
}]
}
],variationOptions: {},};
},mounted: function() {
for (let i = 0; i < this.variations.length; i++) {
Vue.set(this.variationOptions,this.variations[i].variationName,[])
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
As Object: {{ variationOptions }}<br />
As Array: {{ variationOptionsArray }}
<table>
<thead>
<tr>
<th>Variation Name</th>
<th>Variation Values</th>
<th>Selected</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,idxi) in variations" :key="`item-${ idxi }`">
<td>
{{ item.variationName }}
</td>
<td>
<select multiple v-model="variationOptions[item.variationName]">
<option v-for="(option,idxj) in item.variant_options" :key="`options-${ idxi }-${ idxj }`" :value="option.variationOptionName">
{{ option.variationOptionName }}
</option>
</select>
</td>
<td>
{{ variationOptions[item.variationName] }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
最大的不同是，我没有将选择的值存储在 Array 中，而是存储在 Object 中-但我也将这些值存储在了计算出的值中数组格式以提供更多便利。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。