[Vuejs]-How to pass a JSON Array in a parent child communication in VueJS?

by

0👍

Your first problem is that when you have a prop containing dashes (-), you need to use camelCase in your JS, since a variable name cannot contain a dash. Then, you can have both the name and the array (without the need for an Object.xx()) in your v-for by using:

v-for="(array, name) in arrays"

Demo

const dataFromFile = {firstArray:[{id:1,name:"Lucas"},{id:2,name:"Michael"}],secondArray:[{id:1,name:"Maria"},{id:2,name:"Taylor"}]};

Vue.component('Child', {
  template: '#child-template',
  props: {
    childName: String,
    childArray: Array
  }
});

new Vue({
  el: '#parent',
  data() {
    return {
      arrays: dataFromFile
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>

<div id="parent">
  <Child
    v-for="(array, name) in arrays" :key="array"
    :child-name="name" :child-array="array"
  />
</div>

<template id="child-template">
  <div id="child">
    {{ childName }} - {{ childArray }}
  </div>
</template>

Leave a comment