I have the following problem: I have two separate lists and I need to pass the selected data (checkbox) to the other list, removing the selected item and putting it in the other list (along with its header).
I tried to push but I can not copy the structure from the first list to the second.
Here is an example to better illustrate the question:
var app = new Vue({
el: "#app",
data: {
cuitsCuota: [{}],
cuitsEmisora: [
{
nombre: "12 21365896 7 | Mercerias Gutierrez",
id: 0,
comercios: [
{
nombre: "1254789 | Hilos de Oro | Villa Urquiza",
id: 0
},
{
nombre: "1265897 | Mis Botones | Villa Urquiza",
id: 1
},
{
nombre: "1211897 | Mis Botones | Villa Urquiza",
id: 2
}
]
},
{
nombre: "30 25665877 1 | Mercerias Rodriguez",
id: 1,
comercios: [
{
nombre: "11 21365811 1 | Mercerias Rodriguez",
id: 0
},
{
nombre: "99 21365811 1 | Mercerias Rodriguez",
id: 1
},
{
nombre: "77 21365811 1 | Mercerias Rodriguez",
id: 2
}
]
}
]
},
methods: {
testando: function() {
var self = this;
var values = [];
console.log(this.cuitsEmisora);
this.cuitsEmisora.forEach(function(i, el) {
console.log(values);
});
}
}
});.c-box-cfc-comercios__emisora{
background:#ccc;
float:left;
margin-right:15px;
}
.option-chk-lbl{
color:blue;
}
.c-box-cfc-comercios__cuotacuota{
background:red;
float:right;
}<script src="https://unpkg.com/vue/dist/vue.js"></script><divid="app">
<div class="c-box-cfc-comercios c-box-cfc-comercios__emisora">
<div class="c-lista-box">
<div class="option-wrapper" v-for="cuit in cuitsEmisora">
<div class="option-chk-lbl">
<input type="checkbox" class="chkLabel" :id="'cuit'+cuit.id">
<label :for="'cuit'+cuit.id">
{{cuit.nombre}}
</label>
</div>
<div class="option-chk" v-for="comercio in cuit.comercios">
<input type="checkbox" :id="'comercio'+cuit.id+comercio.id" :value="'comercio'+cuit.id+comercio.id">
<label :for="'comercio'+cuit.id+comercio.id">
<span class="box"></span>
<span class="check-text">{{comercio.nombre}}</span>
</label>
</div>
</div>
</div>
</div>
<button v-on:click="testando()">
TO RIGHT
</button>
<div class="c-box-cfc-comercios c-box-cfc-comercios__cuotacuota">
<div class="c-lista-box">
<div class="option-wrapper" v-for="cuit in cuitsCuota">
<div class="option-chk-lbl">
<input type="checkbox" class="chkLabel" :id="'cuit'+cuit.id">
<label :for="'cuit'+cuit.id">
{{cuit.nombre}}
</label>
</div>
<div class="option-chk" v-for="comercio in cuitsCuota.comercios">
<input type="checkbox" :id="'comercio'+cuit.id+comercio.id">
<label :for="'comercio'+cuit.id+comercio.id">
<span class="box"></span>
<span class="check-text">{{comercio.nombre}}</span>
</label>
</div>
</div>
</div>
</div>
</div>In case I need to pass the selected trade from 'cuitsEmisora' to 'cuitsCuota' however, the same structure being mounted.