如何解决 [Vue 警告]: 避免直接修改 prop 的值，因为这样会在 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 warn]: 避免直接修改 props ，因为当父组件重新渲染时，它的值将被覆盖。相反，使用基于 prop 值的数据或计算属性。正在被修改的 prop： "value"（位于 C:\xampp\htdocs\myshop\resources\assets\js\components\Star.vue 中）

该如何解决这个问题呢？

- samuel toh

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

- Andy

Answer 2

在这里，你正在更改value属性。

return this.value = star;

也可能在这里。

v-model="value"

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

不要在组件内部更改属性，当有人点击星形评分时，您可能想要$emit组件已更改，并让您的视图更改$data['rating']，这将正确地重新渲染星形评分组件。

请参阅Vue文档有关组件组合的内容。

- Bert

---

我仍然困惑如何实现它。 - samuel toh

@samueltoh，你在使用你问题中展示的代码时还是会收到警告吗？ - Bert

https://jakzaizzat.com/avoid-mutating-a-prop-directly/ - Wikki

Answer 3

这个警告建议不要直接修改 prop 的值，因为如果父组件的数据发生改变，您将失去这个更改。

话虽如此，在您的方法中：

methods: {
  rate: function (star) {
    var self = this;
    if (!this.disabled) {
        this.$http.post(window.BaseUrl + '/star', {star: star}).then(function (response) {
            console.log('submitted');
        });
        this.temp_value = star;
        // return this.value = star; - remove this line
    }
  }
}

并添加一个computed属性，如下所示：

computed: {
  starValue () {
    return this.temp_value
  }
}

- Amresh Venugopal

---

我尝试过了。但是它会影响其他代码。能否更新你的答案并提供更完整的解决方案？ - samuel toh

@samueltoh，你能告诉我你是怎么使用 value 的吗？为什么它会影响其他地方？ - Amresh Venugopal

看看我的问题。我更新了代码。我试着这样做。 - samuel toh

@samueltoh 抱歉，我无法看到您在哪里使用value。对于您的情况，您需要使用v-model，但是只有当我了解您当前的用法时，我才能提供帮助。 - Amresh Venugopal

这是：props: { 'value': null },。这是值。我已经更新了我的代码。我根据你的答案更新了我的代码。我的代码也使用了v-model。 - samuel toh