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留空：

我认为该项目不会转到第二个“选择为同一对象”。我该怎么解决？

Answer 1

我认为您正在将整个数组（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;
    });

}

希望这会有所帮助！

Answer 2

您需要将对象绑定到如下选项：

<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>

希望它会有所帮助：）

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

2 个答案:

}