javascript - Vue.js - 如何将 prop 作为 json 数组传递并在子组件中正确使用它？

Question

正在使用 Laravel 和 Vue。数据正在从 Laravel 返回到 Vue。发送到 Vue 子组件的 Vue 道具是一个 json 对象数组，但是子组件在读取它时会出错。控制台中的错误是：

“TypeError：无法读取未定义的属性 'id'”。任何帮助将不胜感激。

这是从 Laravel 返回的原始数据：

{"channels":[{"id":4,"name":"AI","created_at":"2020-04-27T15:18:01.000000Z","updated_at":"2020-04-27T15:18:01.000000Z"},{"id":2,"name":"Android Development","created_at":"2020-04-27T15:18:01.000000Z","updated_at":"2020-04-27T15:18:01.000000Z"},{"id":3,"name":"iOS Development","created_at":"2020-04-27T15:18:01.000000Z","updated_at":"2020-04-27T15:18:01.000000Z"},{"id":1,"name":"Web Development","created_at":"2020-04-27T15:18:01.000000Z","updated_at":"2020-04-27T15:18:01.000000Z"}]}

作为 Vue 道具传递给子组件的数据：

<template>
  <div id="component">
     <router-link :to="{ name: 'home' }">Home</router-link>
            <router-view></router-view>
      <br>
            <vue-chat :channels="channels"></vue-chat>
    </div>
</template>

<script>

export default {


data() {
            return {
            channels: [],
            }   
    },

methods: {

      fetchChannels() {

      let endpoint = `/channels`;

        axios.get(endpoint).then(resp => {
                    this.channels = resp.data.channels;          
                });
        },

      },

      created() {
      this.fetchChannels();
      }

}

</script>

尝试访问 Vue 道具时出错的子组件：

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
            <!--    <div class="card-header">Chat</div> -->

                <div class="card-body">

                     <div class="container">

                    </div>   

                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {

    props: ['channels'],

    data() {
            return {
            activeChannel: this.channels[0].id,

        }   
    },

}
</script>

<style scoped>
@import '/sass/app.scss';
</style>

标签： javascriptlaravelvue.jsvuejs2vue-component

Answer 1

第一次channels不可用会引发该错误，我建议将其定义activeChannel为计算属性，例如：

export default {

    props: ['channels'],

    data() {
            return {


        }   
    },
  computed:{
    activeChannel(){
     return this.channels[0]? this.channels[0].id:null,
   }

}