Vuejs: how to pass data from one array to another array?

Asked

Viewed 286 times

1

I have the following problem: I have two separate lists and need to pass the selected data (checkbox) to the other list by removing the selected item and placing it in the other list (along with its header).

I tried to push but I can’t copy the structure from the first list to the second.

Here is an example assembled to illustrate the question better:

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>
<div id="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 trade selected from the 'cuitsEmisora' to the 'cuitsCuota' however, being mounted the same structure.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.