Prop reactivity not working when passed from blade Laravel

user_5803660 0
Viewed 1090

I attempted to pass a prop from Blade file to Vuejs component name AppMessages

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

Then messages are being rendered based on 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>

in the child component, I pass a message when created by a Bus event

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

define this.messages in props

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

in the parent component AppMessages I set up the listner

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

Issue:

I expected the new passed message to but up in the chat but I can see it in the console (no error) but not rendered.

laravel-blade vuejs2 laravel vue.js
1 Answers

You cannot manipulate a component's props from within the component. Data flows down to children through props, and up to parents through events (not talking about a bus).

You should be able to get reactivity using a computed property, or just assigning messages on mount to a data property.

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