如何在 VueJS 的父子通信中传递 JSON 数组？

Question

我是 VueJS 的新手，我在 JSON 文件和父子通信方面遇到了一些问题。 我需要将 JSON 文件中的每个数组传递给子 Vue 元素。

在我看来，父级读取 JSON 文件并使用 v-for 创建一个子级，为 JSON 文件中的每个数组创建一个子级。

我没有在网上找到任何东西，并且有了道具，我无法做到这一点。 请帮帮我！！

我需要将 'firstArray'（对象数组）从父 .vue 文件传递​​给子 .vue 文件。

这是我的 JSON 文件：

{
  "firstArray": [
    {"id": 01, "name": "Lucas"},
    {"id": 02, "name": "Michael"}
  ],

  "secondArray": [
    {"id": 01, "name": "Maria"},
    {"id": 02, "name": "Taylor"}
  ],

  ...
}

这是读取 JSON 文件中 Array 名称的父 .vue 文件：

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


<script>
import data from '../assets/file.json'
import Child from './Child'

export default {
  name: 'Parent',
  components: {
    Child
  },
  computed: {
    arrays() {
      return Object.keys(data)
    }
  }
}
</script>

这是子 .vue 文件，它只需要将对象读取到每个数组中

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


<script>
export default {
  name: 'Child',
  props: {
    child-name: String
  }
}
</script>

谢谢大家。

Answer 1

您的第一个问题是，当您有一个包含破折号 (-) 的道具时，您需要在 JS 中使用 camelCase，因为变量名不能包含破折号。然后，您可以在 v-for 中同时使用名称和数组 （无需 Object.xx()）：

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

演示

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>