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

Question

我试图将 Blade 文件中的 prop 传递给 Vuejs 组件名称 AppMessages

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

然后根据selfOwned boolean 呈现消息。

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

在子组件中，我通过总线事件创建时传递一条消息

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

在 props 中定义 this.messages

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

在父组件AppMessages我设置了listner

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

问题：

我预计新传递的消息会在聊天中出现，但我可以在控制台中看到它（没有错误）但没有呈现。

Answer 1

你不能从组件内部操作组件的 props。数据通过道具向下传递给孩子，通过事件向上传递给父母（不是指公共汽车）。

您应该能够使用计算属性获得响应性，或者只是将挂载消息分配给数据属性。

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