如何解决如何在Vue Multiselect中填充嵌套数组
我正在尝试显示Array(变量)和嵌套对象以进行多选。
但是我无法在下拉菜单中显示变体选项。
我假设我需要先添加另一个v-for for item.variant_options
,然后才能在多选中填写:options=
。
显示添加数据时,问题是选项显示为单独的选择框
但是我不确定如何实现
此外,我如何将选择与选择的根id['variations']
绑定
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},el: "#app",data: {
variations: [
{
"id":1,"variationName":"asdfsdfg","created_at":"2020-08-20T16:23:18.000000Z","updated_at":"2020-08-20T16:23:18.000000Z","variant_options":[
{
"id":1,"variants_id":1,"variationOptionName":"asdf","created_at":"2020-08-20T16:45:15.000000Z","updated_at":"2020-08-20T16:45:15.000000Z"
},{
"id":2,"variationOptionName":"asdfsdf","created_at":"2020-08-20T16:45:45.000000Z","updated_at":"2020-08-20T16:45:45.000000Z"
},{
"id":3,"variationOptionName":"adsd","created_at":"2020-08-20T16:46:23.000000Z","updated_at":"2020-08-20T16:46:23.000000Z"
},{
"id":4,"variationOptionName":"xfdf","created_at":"2020-08-20T16:47:15.000000Z","updated_at":"2020-08-20T16:47:15.000000Z"
},{
"id":5,"variationOptionName":"sr","created_at":"2020-08-20T16:47:58.000000Z","updated_at":"2020-08-20T16:47:58.000000Z"
}
]
},{
"id":2,"created_at":"2020-08-20T16:25:14.000000Z","updated_at":"2020-08-20T16:25:14.000000Z","variant_options":[
]
},{
"id":3,"variationName":"sdfdg","created_at":"2020-08-20T16:25:45.000000Z","updated_at":"2020-08-20T16:25:45.000000Z","variant_options":[
{
"id":6,"variants_id":3,"variationOptionName":"x","created_at":"2020-08-20T16:48:44.000000Z","updated_at":"2020-08-20T16:48:44.000000Z"
}
]
}
]
},methods: {
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.4/dist/vue-multiselect.min.js"></script>
<link href="https://unpkg.com/vue-multiselect@2.1.4/dist/vue-multiselect.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="row" v-for="(item,index) in variations" :key="item.id">
<div class="col-sm-6">
<input type="hidden" :value="item.id" />
</div>
<div class="col-sm-6">
<multiselect v-model="value" :options="item.variant_options" :internal-search="false" group-values="variationOptionName" :multiple="true" placeholder="Pick some" label="name">
<template slot="selection" slot-scope="{ values,search,isOpen }">
<span class="multiselect__single" v-if="values.length && !isOpen">{{ values.length }} options selected</span>
</template>
</multiselect>
</div>
<label for="exampleFormControlSelect1">{{item.variationName}}</label>
</div>
</div>
*
审判2
在这种方法中,我能够填充结果,但无法弄清楚如何从选择菜单中检索数据(绑定到相应的选择菜单)
<select
multiple="multiple"
class="form-control"
id="exampleFormControlSelect1"
v-model="selectedValues[index]['values']"
@change="getSelectedID($event)"
>
<option
v-for="(values,index) in item.variant_options"
:value="values.id"
:key="values.id"
>{{values.variationOptionName}}</option>
</select>
如果您能向我解释我做错了什么,我将不胜感激
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。