使用 vue-multiselect 添加更多动态下拉菜单

Question

我正在尝试使用 vue-multiselect 构建添加更多选项

我面临的以下问题是：

无法为states选择多个标签
无法删除states选定标签
单击加号按钮后，旧值又回来了
动态v-model=""工作不正常

这是一个问题 giff https://imgur.com/CS31b6w

这是一个更好的可见性的代码笔链接： https ://codepen.io/eabangalore/pen/WNjRXym?editors=1010

这是我尝试过的：

 var app = new Vue({ el: '#app', components: { Multiselect: window.VueMultiselect.default }, data () { return { addMoreOptionsList:[], dynamicAddedOptionsHashMap:{}, value: [], options: [ { "country": "America", "states":['CA','MA'], id:'111', }, { "country": "India", "states":['KA','MH'], id:'22222' }, { "country": "West Indies", "states":['West Indies1','West Indies2'], id:'3333' }, ] } }, methods:{ addMoreItems(){ this.addMoreOptionsList.push('1 more added'); }, removeAll(){ this.addMoreOptionsList = []; }, countrySelected(options){ //console.log('options',options); if(!Object.hasOwnProperty.call(this.dynamicAddedOptionsHashMap,options.id)) this.dynamicAddedOptionsHashMap[options.id] = {options:[],values:[]}; this.dynamicAddedOptionsHashMap[options.id]['options'] = options.states; } } })

 body { font-family: 'Arial' } .dropdown-item{ display:flex;justify-content:space-between;margin-left:20px; margin-top:20px; }

 <!DOCTYPE HTML> <html> <head> <title>Timeline</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-multiselect@2.1.0"></script> <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> </head> <body> <div id="app"> <div style="display: flex; margin-bottom: 20px; text-align: end; justify-content: flex-end;"><button style="margin-right:20px;" @click="removeAll()">X</button><button @click="addMoreItems()">+</button></div> <div class="dropdown-item" v-if="addMoreOptionsList.length" v-for="(item,index) in addMoreOptionsList"> <multiselect v-model="value[index]" placeholder="Country?" label="country" :options="options" :multiple="false" :taggable="false" @select="countrySelected($event)" ></multiselect> <multiselect style="margin-left:20px;" v-if="value[index] && dynamicAddedOptionsHashMap[value[index].id]" v-model="dynamicAddedOptionsHashMap[value[index].id].values" placeholder="States?" :options="dynamicAddedOptionsHashMap[value[index].id].options" :multiple="true" :taggable="false" @select="countrySelected($event)" ></multiselect> </div> </div> </body>

Answer 1

问题 1 ：您可以将所选状态保存在一个单独的变量中，因为我将它保存在selectedStates 。

问题 2-3 ：您需要初始化您的变量，如下面的演示所示。

问题 4 ：动态值适用于selectedStates[index]

 var app = new Vue({ el: "#app", components: { Multiselect: window.VueMultiselect.default }, data() { return { addMoreOptionsList: [], dynamicAddedOptionsHashMap: {}, value: [], selectedStates: [], options: [{ country: "America", states: ["CA", "MA"], id: "111" }, { country: "India", states: ["KA", "MH"], id: "22222" }, { country: "West Indies", states: ["West Indies1", "West Indies2"], id: "3333" } ] }; }, methods: { addMoreItems() { this.addMoreOptionsList.push("1 more added"); this.selectedStates.push({ id: null, values: [] }) }, removeAll() { this.addMoreOptionsList = []; this.dynamicAddedOptionsHashMap = {}; this.value = []; this.selectedStates = []; }, getOptions(id) { const option = this.options.find((item) => item.id == id); console.log(option) if (option) return option.states; return [] }, selectTheState(index) { console.log(this.selectedStates); this.selectedStates[index].id = this.value[index].id } } });

 body { font-family: 'Arial' } .dropdown-item { display: flex; justify-content: space-between; margin-left: 20px; margin-top: 20px; }

 <!DOCTYPE HTML> <html> <head> <title>Timeline</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-multiselect@2.1.0"></script> <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> </head> <body> <div id="app"> <div style="display: flex; margin-bottom: 20px; text-align: end; justify-content: flex-end;"><button style="margin-right:20px;" @click="removeAll()">X</button><button @click="addMoreItems()">+</button></div> <div class="dropdown-item" v-for="(item,index) in addMoreOptionsList"> <multiselect v-model="value[index]" placeholder="Country?" label="country" :options="options" :multiple="false" :taggable="false"></multiselect> <multiselect style="margin-left:20px;" v-if="value[index]" v-model="selectedStates[index].values" placeholder="States?" :options="getOptions(value[index].id)" :multiple="true" :taggable="false" @select="selectTheState(index)"></multiselect> </div> </div> </body>

使用 vue-multiselect 添加更多动态下拉菜单

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-07-14 09:47:16

使用 vue-multiselect 添加更多动态下拉菜单

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-07-14 09:47:16

解决方案1
2 已采纳 2021-07-14 09:47:16