HTML：
选择框：1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<table>
<tr>
<td rowspan="1" class="reportSmallWd invoiceCostCol" data-invoice-lock="1">
</td>
<td rowspan="1" class="reportSmallWd">
<i class="fa pad5 fa-unlock-alt" ></i>
</td>
</tr>
</table>点击活动：
<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>
选择Box：2
<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>
脚本是，
<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，当我选择{{1}时在moved to second select box中点击option，数据需要移至second select box。
添加removeFacilities我尝试过，
first select box它将数据移动到第二个选择框但该数据仍然保留在第一个选择框中，我应该如何删除此first to second，我在这里使用 addFacilities() {
this.selectedFacilities = this.facilitySelected.concat(this.selectedFacilities);
},
添加数据。
如果我选择该选项并单击addFacilities，则应该从duplication中移除该选项，反之亦然，concat也是如此。
答案 0 :(得分：3)
如果您确实想在数组之间移动项目，可以这样做。我稍微清理了一下代码，只专注于此。
HTML：
<script src="https://unpkg.com/vue@2.2.6/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);
}
},
}
})
工作小提琴示例：shutdown function
答案 1 :(得分：1)
我在代码中更改了部分内容，然后才有效
我认为它不起作用的原因与v-bind:value="facility.value"有关，你在第一个选择框中绑定了对象，而在第二个选择框中绑定了整数值。它使每个v-model的值受到不同类型的约束
fiddle
new Vue({
el: "#app",
data: {
facilitySelected1: [],
facilitySelected2: [],
availableFacilities: [{
value: 1,
text: 'Double (Non a/c)'
},
{
value: 2,
text: 'Premium Double (a/c)'
},
{
value: 3,
text: 'Standard Double (a/c)'
}
],
selectedFacilities: [],
},
methods: {
removeFacilities() {
this.selectedFacilities = this.selectedFacilities.filter(fac => !this.facilitySelected2.includes(fac));
this.availableFacilities = [...this.availableFacilities, ...this.facilitySelected2];
this.facilitySelected2 = [];
},
addFacilities() {
this.availableFacilities = this.availableFacilities.filter(fac => !this.facilitySelected1.includes(fac));
this.selectedFacilities = [...this.selectedFacilities, ...this.facilitySelected1];
this.facilitySelected1 = [];
}
}
})<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
<select v-model="facilitySelected1" multiple="multiple" id="facilities" size="4" class="form-control">
<option v-for="availability in availableFacilities" :value="availability">{{availability.text}}</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>
<select v-model="facilitySelected2" multiple="multiple" id="facilities2" size="4" class="form-control">
<option v-for="facility in selectedFacilities" :value="facility">{{facility.text}}</option>
</select>
</div>
答案 2 :(得分：0)
怎么样
export default {
data(){
return{
facilitySelected:[],
availableFacilities: [{
value: 1,
label: 'Double (Non a/c)',
selected: false,
},
{
value: 2,
label: 'Premium Double (a/c)'
selected: false,
},
{
value: 3,
label: 'Standard Double (a/c)'
selected: false,
}
],
},
computed: {
selectedFacilities() {
return this.availableFacilities.filter(f => f.selected);
},
unselectedFacilities() {
return this.availableFacilities.filter(f => !f.selected);
},
}
},
并相应地将<select> s绑定到2个计算列表。单击添加/删除时，只需将项目的选定属性设置为true / false。
顺便说一句，您尝试实施的内容与transfer组件非常相似。例如：http://element.eleme.io/#/en-US/component/transfer。
答案 3 :(得分：0)
检查我所做的解决方案：
https://jsfiddle.net/Lfd6j90c/2/
我已经更改了一些代码
new Vue({
el: "#app",
data: {
add: [],
remove: [],
facilitySelected: [],
availableFacilities: [{
value: 1,
text: 'Double (Non a/c)'
}, {
value: 2,
text: 'Premium Double (a/c)'
}, {
value: 3,
text: 'Standard Double (a/c)'
}]
},
methods: {
addFacilities() {
var af = this.availableFacilities;
var fs = this.facilitySelected;
this.add.forEach(function(element) {
fs.push(af[element]);
af.splice(element, 1);
});
this.availableFacilities = af;
this.facilitySelected = fs;
},
removeFacilities() {
var af = this.availableFacilities;
var fs = this.facilitySelected;
this.remove.forEach(function(element) {
af.push(fs[element]);
fs.splice(element, 1);
});
this.availableFacilities = af;
this.facilitySelected = fs;
}
}
}) <script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
<div class="row">
<div class="col-xs-5">
<select v-model="add" multiple="multiple" size="4" class="form-control">
<option v-for="(item, index) in availableFacilities" v-bind:value="index">
{{ item.text }}
</option>
</select>
</div>
<div class="col-xs-2 ">
<button @click="removeFacilities" class="btn btn-default remove_option" rel="facilities2" id="remove"><</button>
<button @click="addFacilities" class="btn btn-default add_option" rel="facilities2" id="add">></button>
</div>
<div class="col-xs-5">
<select v-model="remove" multiple="multiple" size="4" class="form-control">
<option v-for="(item, index) in facilitySelected" v-bind:value="index">
{{ item.text }}
</option>
</select>
</div>
</div>
</div>