Vue.js - 在两个选择之间传输对象

Question

我有以下带有 2 个选择和 2 个按钮的 HTML，用于在选择之间传输选项：

<div class="col-xs-1" style="width:45%">
    <label for="txtDescricao">Motivos</label>
    <select multiple="multiple" class="form-control" id="todosMotivos" v-model="Motivos_selected" style="width: 100%;">
        <option v-for="motivo in Motivos" v-bind:value="motivo.Codigo">{{motivo.Descricao}}</option>
    </select>
</div>
<div class="col-xs-1 text-center align-middle" style="width:10%">
    <br />
    <p><button type="button" class="btn btn-default btn-sm fa fa-arrow-right" v-on:click.prevent="adicionarItensSelect"></button></p>
    <p><button type="button" class="btn btn-default btn-sm fa fa-arrow-left" v-on:click.prevent="removerItensSelect"></button></p>
</div>
<div class="col-xs-1" style="width:45%">
    <label for="txtDescricao">Motivos vinculados</label>
    <select multiple="multiple" class="form-control" id="selectedMotivos" v-model="Motivos_vinculados_selected" style="width: 100%;">
        <option v-for="motivo in Motivos_vinculados" v-bind:value="motivo.Codigo">{{motivo.Descricao}}</option>
    </select>
</div>

这里是 vue 应用数据：

Motivos: [],
Motivos_selected: [],
Motivos_vinculados: [],
Motivos_vinculados_selected: [],

“Motivos”列表正在以这种方式加载：

getMotivos: function (motivosVinculados) {
    var self = this;

    $.ajax({
        type: "POST",
        url: "../Motivo/GetMotivos",

        success: function (data) {
            self.Motivos = data.motivos;
        },
        error: function (error) {
            console.log(error);
            alert('Erro ao executar operação.');
        }
    });
},

我正在尝试将选定的选项转移到第二个这样选择：

adicionarItensSelect: function () {
    var self = this;
    self.Motivos_vinculados.push(self.Motivos_selected);
},

但是，相反，第二个 Select 选项变为空白：

我认为该项目不会将第二个 Select 作为同一个对象。我该怎么做才能解决这个问题？

Answer 1

您需要像这样将对象绑定到选项：

<option v-for="motivo in Motivos" v-bind:value="motivo>{{motivo.Descricao}}</option>

var appEquipamento = new Vue({
    el: "#equipamentoApp",
    data: {
        Motivos: [
        	{ Codigo: 1, Descricao: "Motivo 1" },
        	{ Codigo: 2, Descricao: "Motivo 2" },
          { Codigo: 3, Descricao: "Motivo 3" }
        ],
        Motivos_selected: [],
        Motivos_vinculados: [],
        Motivos_vinculados_selected: []
    },
    methods: {
        adicionarItensSelect: function () {
            var self = this;
            self.Motivos_vinculados = self.Motivos_vinculados.concat(self.Motivos_selected);
        }
    }
});

<script src="https://unpkg.com/vue"></script>
<section id="equipamentoApp" class="content">
<div class="col-xs-1" style="width:45%">
    <label for="txtDescricao">Motivos</label>
    <select multiple="multiple" class="form-control" id="todosMotivos" v-model="Motivos_selected" style="width: 100%;">
        <option v-for="motivo in Motivos" v-bind:value="motivo">{{motivo.Descricao}}</option>
    </select>
</div>
<div class="col-xs-1 text-center align-middle" style="width:10%">
    <br />
    <p><button type="button" class="btn btn-default btn-sm fa fa-arrow-right" v-on:click.prevent="adicionarItensSelect"> -> </button></p>
    <p><button type="button" class="btn btn-default btn-sm fa fa-arrow-left" v-on:click.prevent="removerItensSelect"> <- </button></p>
</div>
<div class="col-xs-1" style="width:45%">
    <label for="txtDescricao">Motivos vinculados</label>
    <select multiple="multiple" class="form-control" id="selectedMotivos" v-model="Motivos_vinculados_selected" style="width: 100%;">
        <option v-for="motivo in Motivos_vinculados" v-bind:value="motivo.Codigo">{{motivo.Descricao}}</option>
    </select>
</div>
</section>

希望对你有帮助:)

Answer 2

我认为您正在将整个数组 (Motivos_selected) 推入 Motivos_vinculados 数组。这将导致嵌套数组。

你应该使用：

self.Motivos_vinculados.concat(self.Motivos_selected);

如果你想加入两个数组，覆盖整个数组：

self.Motivos_vinculados = self.Motivos_selected;

或遍历第一个数组并将项目推送到第二个：

self.Motivos_vinculados.map(item => { self.Motivos_selected.push(item) });

编辑--------- 看了小提琴后，我的解决方案如下：

adicionarItensSelect: function () {
    var self = this;
    self.Motivos_vinculados = this.Motivos.filter(motivo => {
        return self.Motivos_selected.indexOf(motivo.Codigo) !== -1;
    });

}

希望这会有所帮助！