如何解决[Vue警告]:避免直接修改一个prop，因为它的值会在vue.js 2上被覆盖? [英] How to solve [Vue warn]: Avoid mutating a prop directly since the value will be overwritten on vue.js 2?
问题描述
我的观点是这样的:
...<star :value="{{ $data['rating'] }}"></star>...我的星星组件是这样的:
<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)"></span><脚本>导出默认{道具: {值":空},计算:{星值(){返回 this.temp_value}},数据(){返回{项目: [{值:5}，{值:4}，{值:3}，{值:2}，{值:1}],临时值:空，}},方法:{率:功能(星){this.$http.post(window.BaseUrl + '/star', {star: star});this.temp_value = 星；},}}我的css是这样的:
span.rating {方向:rtl；显示:内联块；}span.rating .input-star {背景: url("../img/star.png") 0 -16px;填充左:0;左边距:0；宽度:16px；高度:16px；}span.rating .input-star:hover, span.rating .input-star:hover ~ .input-star {背景位置:0 0；}span.rating .is-selected{背景位置:0 0；}span.rating .is-disabled{光标:默认；}span.rating .input-star .input-rating {显示:无；}当我点击星星时，控制台上存在这样的错误:
<块引用>[Vue 警告]:避免直接改变 prop，因为它的值将是每当父组件重新渲染时被覆盖.相反，使用一个基于道具值的数据或计算属性.道具变异:价值"(在C:xampphtdocsmyshop esourcesassetsjscomponentsStar.vue)
我该如何解决?
您需要使用 getter 和 setter 进行计算，然后使用 $emit 更新 prop eg:
计算:{星值:{得到:函数(){返回 this.temp_value},设置:函数(新值){//$emit 是更新 props 的正确方式:this.$emit('update:value', newValue);}}}My view is like this :
<div class="col-md-8">
...
<star :value="{{ $data['rating'] }}"></star>
...
</div>
My star component is like this :
<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>
My css is like this :
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;
}
When I click the star, there exist error on the console like this :
[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: "value" (found in at C:xampphtdocsmyshop esourcesassetsjscomponentsStar.vue)
How can I solve it?
You need to make the computed with a getter and a setter and then use $emit to update the prop e.g:
computed: {
starValue:{
get:function () {
return this.temp_value
},
set: function(newValue){
// $emit is the correct way to update props:
this.$emit('update:value', newValue);
}
}
}
这篇关于如何解决[Vue警告]:避免直接修改一个prop，因为它的值会在vue.js 2上被覆盖?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
