![](/img/trans.png)
[英]vue warn - Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
[英]How to solve [Vue warn]: Avoid mutating a prop directly since the value will be overwritten on vue.js 2?
我的看法是这样的:
<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)
我该如何解决?
您需要使用 getter 和 setter 进行计算,然后使用$emit
更新道具,例如:
computed: {
starValue:{
get:function () {
return this.temp_value
},
set: function(newValue){
// $emit is the correct way to update props:
this.$emit('update:value', newValue);
}
}
}
您在此处更改value
属性。
return this.value = star;
可能在这里。
v-model="value"
警告意味着无论何时重新渲染您的视图, value
属性都将设置为$data['rating']
,从而覆盖您在 start 组件中所做的任何事情。
当有人单击星号时,您可能希望$emit
组件已更改并让您的视图更改$data['rating']
,而不是更改组件内的属性,这将正确地重新渲染星号组件。
请参阅有关组件组合的 Vue 文档。
警告建议不要直接修改 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: {
starValue () {
return this.temp_value
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.