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

时间:2018-11-07 12:07:53

标签: javascript vue.js

我有以下带有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留空:

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

2 个答案:

答案 0 :(得分:0)

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

}

希望这会有所帮助!

答案 1 :(得分:0)

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

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

希望它会有所帮助:)