Избегайте мутации напрямую

Question

Я получаю предупреждение:

app.js: 87486 [Vue warn]: избегайте прямого изменения свойства, так как значение будет перезаписываться при повторной визуализации родительского компонента. Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита. Подставка изменена: "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 --;

        },
    }

Answer 1

Инициализируйте атрибут данных из вашего реквизита и управляйте им.

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--;
        },
    }
}

Answer 2

Так же, как в предупреждении говорится, что вы не должны изменять видимость, удалите this.likescount ++;this.likescount -;

и это уберет предупреждение ... ваш реквизит должен быть чистым