从刀片Laravel传递时，支柱反应性不起作用

问题描述

我试图将道具从Blade文件传递给Vuejs组件名称AppMessages

<app-messages :messages="{{ $messages }}"></app-messages>

然后根据selfOwned布尔值呈现消息。

 <app-message v-for="message in messages" :message="message" :key="message.id" v-if="message.selfOwned === false"></app-message>
 <app-message-own v-for="message in messages" :message="message" :key="message.id" v-if="message.selfOwned === true"></app-message-own>

在子组件中，当由Bus事件创建时，我会传递一条消息

 let tempBuitMessage = this.tempMessage()
 Bus.$emit('message.added',tempBuitMessage);

在道具中定义this.messages

 export default {
props: {
    messages: {
        required: true,type: Array
    }
},

在父组件AppMessages中，我设置了列表器

mounted() {
    Bus.$on('message.added',data => {
        this.messages.unshift(data)
        console.log(this.messages)
    });
},

问题：

我希望新传递的消息可以在聊天中找到，但是我可以在控制台中看到它（没有错误），但是没有呈现。

解决方法

您不能从组件内部操纵组件的道具。数据通过道具流到孩子，然后通过事件（而不是在谈论公共汽车）流到父母。

您应该能够使用计算所得的属性来获得反应性，或者只需将安装时的消息分配给data属性即可。

<template>
...
 <app-message v-for="message in model" :message="message" :key="message.id" v-if="message.selfOwned === false"></app-message>
 <app-message-own v-for="message in model" :message="message" :key="message.id" v-if="message.selfOwned === true"></app-message-own>
...
</template>

<script>
export default {
    name: 'app-messages',props: {
        messages: {
            required: true,type: Array
        }
    },data() {
        return {
            model: null,};
    },created() {
        this.model = this.messages;
    },mounted() {
        Bus.$on('message.added',data => {
            this.model.unshift(data)
            console.log(this.messages)
        });
    },}
</script>