如何在 VueJS 的父子通信中傳遞 JSON 數組？

Question

我是 VueJS 的新手，在 JSON 文件和父子通信方面存在一些問題。 我需要將 JSON 文件中的每個數組傳遞給子 Vue 元素。

在我看來，父級讀取 JSON 文件並使用 v-for 創建一個子級，為 JSON 文件中的每個數組創建一個子級。

我在網上沒有找到任何東西，並且有了道具，我無法做到這一點。 請幫我！！

我需要將“firstArray”（對象數組）從父文件傳遞給 child.vue 文件。

這是我的 JSON 文件：

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

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

  ...
}

這是用於讀取 JSON 文件中 Array 名稱的 parent.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>

這是 child.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>