vue.js 中的 public 个属性显示警告

Question

组件代码

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

一切正常，但我低于警告。

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

有一个解释为什么 prop 不应该在 vue 中改变 documentation。如果你需要改变状态，也许你需要一个数据。

赞：

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

Answer 2

根据Vue.js数据流，子组件不应修改从父组件收到的道具。参见 the official documentation and this Stack Overflow 。

正如您的警告所建议的那样："use a data or computed property based on the prop's value"，在您的情况下，这是从 axios 调用收到的响应。

Answer 3

这不是改变道具的最佳方式，因为父级控制着这些数据，任何更改都会覆盖子级数据，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.

vue.js 中的 public 个属性显示警告

public properties in vue.js showing warning

vue.js

laravel-5.5