我个人的思路是这样的：
1.bankList 可以分为两种：一种是左边的，未参与的 list；一种是右边的，参与的list；
2.其实一种是右边的，参与的list 是跟搜索框下面的一样的吧，这里直接 v-for 输出就好了吧。
3.用户点击上方的两个个 select 框的bank（不管左边和右边），记录一个状态值
4.在添加和移除这两个按钮分别绑定 click 事件，事件里就可以在各自的 list 移除bank了
下方的 v-for 输出，假设在 tr 里面：
<tr v-for="bank in bankLists">
<td>{% bank.name %}</td>
<td><ipnut name="plan" value="{%bank.integral_plan %}"></ipnut></td>
</tr>
Vue 的代码，只是一个思路。
new Vue({
el: '#app',
data: {
bankLists: [],
unselectedBankList:[]
},
ready: function () {
var list2 = $('#list2 option').map(function () {
return $(this).val();
}).get().join(",");
_token = "<?php echo csrf_token();?>";
$.ajax({
url: '/draw/select',
dataType: 'json',
data: {_token: _token, list2: list2},
async: false,
type: 'get',
success: function (banks) {
this.bankLists = banks;
}
});
},
methods: {
toggleSelectedBank:function (bank) {
bank.status = 'selected';//这里只是一个演示，设置 status 是为了检测 option 中的bank的状态，你也可以直接使用 jquery 判断
//this.bankLists.$remove(bank);
//再加入没选中的list
//this.unselectedBankList.$push(bank)
}
}
})
使用 ajax 可以看看这里：https://laravist.com/community/tutorials/2
