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

Posted 2023-02-23

【中文标题】Vue.js - 如何将 prop 作为 json 数组传递并在子组件中正确使用？

【英文标题】：Vue.js - How to pass prop as a json array and use it correctly in child component?

【发布时间】：2020-08-11 05:21:41

【问题描述】：

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

“类型错误：无法读取未定义的属性 '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 prop 传递给子组件的数据：

<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>

【问题讨论】：

您在尝试访问 Vue 属性时收到了哪些错误消息？

[Vue 警告]：数据（）中的错误：“TypeError：无法读取未定义的属性 'id'”

好的，但是当你可以在子模板中直接使用channels 属性时，为什么还要在数据函数中使用activeChannel？

【参考方案1】：

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

export default 

    props: ['channels'],

    data() 
            return 


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

【参考方案2】：

您是否在 chrome 上检查了 channels 和 Vue Devtools 的数据？ 您可以尝试更改以下行。

this.channels = resp.data.channels; 到 this.channels = JSON.parse(resp.data.channels);