如何解决[Vue警告]：避免直接更改道具，因为该值会在vue.js 2上被覆盖？

Question

我的看法是这样的：

<div class="col-md-8">
    ...
        <star :value="{{ $data['rating'] }}"></star>
    ...
</div>

我的明星部分是这样的：

<template>
    <span class="rating" :class='{"disable-all-rating": !!value}'>
        <template v-for="item in items">
            <label class="radio-inline input-star" :class="{'is-selected': ((starValue>= item.value) && starValue!= null)}">
                <input type="radio" class="input-rating" v-model="starValue" @click="rate(item.value)">
            </label>
        </template>
    </span>
</template>
<script>
    export default{
        props: {
            'value': null
        },
        computed: {
            starValue () {
                return this.temp_value
            }
        },
        data(){
            return{
                items: [
                    {value: 5},
                    {value: 4},
                    {value: 3},
                    {value: 2},
                    {value: 1}
                ],
                temp_value: null,
            }
        },
        methods:{
            rate: function (star) {           
               this.$http.post(window.BaseUrl + '/star', {star: star});                         
               this.temp_value = star;                         
            },
        }
    }
</script>

我的CSS是这样的：

span.rating {
  direction: rtl;
  display: inline-block;
}

span.rating .input-star {
  background: url("../img/star.png") 0 -16px;
  padding-left: 0;
  margin-left: 0;
  width: 16px;
  height: 16px;
}

span.rating .input-star:hover, span.rating .input-star:hover ~ .input-star {
  background-position: 0 0;
}

span.rating .is-selected{
   background-position: 0 0;
}

span.rating .is-disabled{
   cursor: default;
}

span.rating .input-star .input-rating {
  display: none;
}

当我单击星号时，在控制台上存在如下错误：

[Vue警告]：避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。而是使用基于属性值的数据或计算属性。变异的道具：“值”（位于C：\ xampp \ htdocs \ myshop \ resources \ assets \ js \ components \ Star.vue）

我该如何解决？

Answer 1

您需要使用getter和setter进行计算，然后使用它$emit来更新prop，例如：

    computed: {
        starValue:{ 
            get:function () {
                return this.temp_value
            },
            set: function(newValue){
                // $emit is the correct way to update props:
                this.$emit('update:value', newValue);
            }
        }
    }

Answer 2

你正在改变value这里的属性。

return this.value = star;

也可能在这里。

v-model="value"

该警告意味着，每当您的视图重新渲染时，该value属性都将被设置为$data['rating']，覆盖您在启动组件中所做的任何操作。

当有人单击星形时，您可能希望$emit组件已更改并让您的视图发生变化$data['rating']，而不是改变组件内的属性，这将正确地重新渲染星形组件。

请参阅有关组件组成的 Vue 文档。