Below is the HTML code that includes 2 select elements and 2 buttons for transferring options between them:
<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>
The following Vue app data variables are defined:
Motivos: [],
Motivos_selected: [],
Motivos_vinculados: [],
Motivos_vinculados_selected: [],
To populate the "Motivos" list, the function getMotivos() is used:
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.');
}
});
},
When trying to transfer selected options to the second select element using adicionarItensSelect(), the issue arises:
adicionarItensSelect: function () {
var self = this;
self.Motivos_vinculados.push(self.Motivos_selected);
},
Unfortunately, the option appears blank in the second select. It seems like the object is not being transferred properly. How can I resolve this?