Vue. js - Как передать prop как массив json и правильно использовать его в дочернем компоненте? - PullRequest
Новая
       31

Vue. js - Как передать prop как массив json и правильно использовать его в дочернем компоненте?

0 голосов
/ 27 апреля 2020

Laravel и Vue используются. Данные возвращаются на Vue с Laravel. Объект 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 component: 

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

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

Ответы [ 2 ]

2 голосов
/ 27 апреля 2020

В первый раз channels недоступно, что вызывает эту ошибку, я рекомендую определить activeChannel как вычисляемое свойство, например: 

export default {

    props: ['channels'],

    data() {
            return {


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

}
0 голосов
/ 27 апреля 2020

Проверяли ли вы свои данные channels с Vue Devtools на chrome? Вы можете попробовать изменить строку ниже.

this.channels = resp.data.channels; на this.channels = JSON.parse(resp.data.channels);

...