public properties in vue.js showing warning

Question

Component Code

<template lang="html">
    <div class="chat-users">
        <ul class="list-unstyled">
            <li v-for="chatuser in chatusers" class="left clearfix">
                {{ chatuser.UserName }}
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        props: ["chatusers"],
        created() {
            axios.post("some url").then(response => {
                this.chatusers = response.data.Data;
            });
        }
    }
</script>
<style>

</style>

Everything works perfectly, but I am getting below warning.

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "chatusers"

Answer 1

There is an explanation why prop should not be mutate in the vue documentation. If you need to mutate the state, perhaps you need a data instead.

Like:

    export default {
        data () { return { chatusers: null } },
        created() {
            axios.post("some url").then(response => {
                this.chatusers = response.data.Data;
            });
        }
    }

Answer 2

It is not the best way to mutate the props, since the parent is in control of this data and any changes it will overwrite child data, from the docs:

In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.

Answer 3

According to Vue.js data flow, the props received from parent should not be modified by child component. See the official documentation and this Stack Overflow answer.

As suggested by your warning: "use a data or computed property based on the prop's value", that in your case is the response received from axios call.