javascript - 如何在Vue JS中的选择框之间添加和删除项目？

HTML：选择框：1 <select v-model="facilitySelected" name="facilities" multiple="multiple" id="facilities" size="4" class="form-control"> <option v-for="availability in availableFacilities" v-bind:value="availability">{{availability.label}}--</option> </select>点击事件：<a @click="removeFacilities" class="btn btn-default remove_option" rel="facilities2" id="remove"><i class="fa fa-arrow-left"></i></a> <a @click="addFacilities" class="btn btn-default add_option" rel="facilities2" id="add"><i class="fa fa-arrow-right"></i></a>选择框：2 <select name="facilities" multiple="multiple" id="facilities2" size="4" class="form-control"> <option v-for="facility in selectedFacilities" v-bind:value="facility.value">{{facility.label}}</option> </select>脚本是export default { data(){ return{ facilitySelected:[], availableFacilities: [{ value: 1, label: 'Double (Non a/c)' }, { value: 2, label: 'Premium Double (a/c)' }, { value: 3, label: 'Standard Double (a/c)' } ], selectedFacilities: [], }},methods:{ addFacilities() { this.selectedFacilities = this.facilitySelected.concat(this.selectedFacilities); }, removeFacilities() { },}}在这里，我有两个选择框，之间有单击事件，我已将变量的值分配给第一个选择框选项。我的要求是，当我从option选择first select box并单击addFacilities click事件时，该特定选项中的数据应为moved to second select box，而当我在option中选择second select box并单击，数据需要移到removeFacilities。为了添加我尝试过的first select box， addFacilities() { this.selectedFacilities = this.facilitySelected.concat(this.selectedFacilities); },它将数据移动到第二个选择框中，但该数据仍保留在第一个选择框中，我应如何删除此first to second，在这里我使用的是duplication来添加数据。如果我选择该选项并单击addFacilities，则该选项应从concat中删除​​，反之亦然，对于first select box。拨弄链接是https://jsfiddle.net/rym9j2ch/ (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 如果您确实想在数组之间移动项目，可以采用这种方法。我整理了一些代码，只专注于此。HTML：<script src="https://unpkg.com/[email protected]/dist/vue.js"></script><div id="app"> <select v-model="availableFacilitiesSelectedValues" multiple="multiple"> <option v-for="facility in availableFacilities" v-bind:value="facility.value">{{facility.text}}</option> </select> <select v-model="selectedFacilitiesSelectedValues" multiple="multiple"> <option v-for="facility in selectedFacilities" v-bind:value="facility.value">{{facility.text}}</option> </select> <br/> <a @click.prevent="addFacilities" href="#">add</a> <br/> <a @click.prevent="removeFacilities" href="#">remove</a></div>JS：new Vue({ el: "#app", data: { availableFacilities: [{ value: 1, text: 'Double (Non a/c)', }, { value: 2, text: 'Premium Double (a/c)', }, { value: 3, text: 'Standard Double (a/c)', }, ], selectedFacilities: [], availableFacilitiesSelectedValues: [], // Facility values, selected in first control selectedFacilitiesSelectedValues: [], // Facility values, selected in second control }, methods: { move(value, arrFrom, arrTo) { // Helper function to transfer facility from one array to another by 'value' property var index = arrFrom.findIndex(function(el) { return el.value == value; }); var item = arrFrom[index]; arrFrom.splice(index, 1); arrTo.push(item); }, addFacilities() { var selected = this.availableFacilitiesSelectedValues.slice(0); for (var i = 0; i < selected.length; ++i) { this.move(selected[i], this.availableFacilities, this.selectedFacilities); } }, removeFacilities() { var selected = this.selectedFacilitiesSelectedValues.slice(0); for (var i = 0; i < selected.length; ++i) { this.move(selected[i], this.selectedFacilities, this.availableFacilities); } }, }})工作提琴示例：https://jsfiddle.net/9x0s73gk/关于javascript - 如何在Vue JS中的选择框之间添加和删除项目？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45607810/ (adsbygoogle = window.adsbygoogle || []).push({});