1

Tengo un Componente en Vue, donde traigo un array llamado arrayTareas2(Ver código) proveniente de una consulta en mi base de datos, y tengo un array fijo llamado arrayTareas1 de valores fijos.

Si ejecutan, pueden notar que el resultado que me entrega al ejecutar el push, es enviarme el array de objeto, dentro de otro array de objeto.

introducir la descripción de la imagen aquí

vue = new Vue({
  el: '#app',
  data:{
    arrayTareas1:[ 
    {text:'tarea1'},
    {text:'tarea2'},   //ARRAY FIJO
    {text:'tarea3'}],
    
    arrayTareas2: [
    {text:'tarea4'},  //ARRAY PROVENIENTE DE LA BASE DE DATOS
    {text:'tarea5'}]
  },
    methods: {
    click(){  
    this.arrayTareas1.push(this.arrayTareas2)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>

<div id="app">
{{arrayTareas1}}
<br>
<button @click="click()">agregar</button>
  <br>
</div>

Y lo que me gustaría es poder realizar un merge, de combinar ambos datos dentro de un sólo array de objeto, es decir, que quede sólo en arrayTareas1.

introducir la descripción de la imagen aquí

¿Alguna idea?

1

1 respuesta 1

1

Puedes usar el operator de spread:

...

De la documentación en español:

La sintaxis extendida o spread syntax permite a un elemento iterable tal como un arreglo o cadena ser expandido en lugares donde cero o más argumentos (para llamadas de función) o elementos (para Array literales) son esperados, o a un objeto ser expandido en lugares donde cero o más pares de valores clave (para literales Tipo Objeto) son esperados.

vue = new Vue({
  el: '#app',
  data:{
    arrayTareas1:[ 
    {text:'tarea1'},
    {text:'tarea2'},   //ARRAY FIJO
    {text:'tarea3'}],
    
    arrayTareas2: [
    {text:'tarea4'},  //ARRAY PROVENIENTE DE LA BASE DE DATOS
    {text:'tarea5'}]
  },
    methods: {
    click(){  
    this.arrayTareas1.push(...this.arrayTareas2)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>

<div id="app">
{{arrayTareas1}}
<br>
<button @click="click()">agregar</button>
  <br>
</div>

1
  • Genial, era lo que necesitaba. Gracias!
    – h6gignacio
    el 9 jun. 2021 a las 23:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.