避免直接改变道具

问题描述

我收到警告:

app.js:87486 [Vue警告]:避免直接更改道具，因为每当父组件重新渲染时，该值就会被覆盖.取而代之的是，根据道具的值使用数据或计算属性.道具被变异:"likescount"

app.js:87486 [Vue warn]: 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: "likescount"

我的刀片

        <path-like-toggle likescount="{{$path->likeCount}}" isliked="{{$path->canBeunLiked()}}" path="{{$path->slug}}" type="{{$path->type}}" ></path-like-toggle>

Vue代码

      props:['isliked','path','type','likescount']
    ,
methods:{
         like () {
             axios.post(`/${this.type}/${this.path}/like/`)
                this.likingStatus = true;
                this.likescount ++;
        },
         unlike () {
             axios.post(`/${this.type}/${this.path}/unlike/`)
                this.likingStatus = false;
                this.likescount --;

        },
    }

推荐答案

从道具中初始化数据属性，然后对其进行操作.

Initialise a data attribute from your prop, and manipulate that.

export default {
    data() {
        return {
            numberOfLikes: this.likescount
        }
    },

    props: [
        'isliked',
        'path',
        'type',
        'likescount'
    ],

    methods:{
        like() {
            axios.post(`/${this.type}/${this.path}/like/`);

            // ...

            this.numberOfLikes++;
        },

        unlike() {
            axios.post(`/${this.type}/${this.path}/unlike/`);

            // ...

            this.numberOfLikes--;
        },
    }
}

这篇关于避免直接改变道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！