我的观点是这样的:
当我点击星星时,控制台上出现错误信息如下:
[Vue warn]: 避免直接修改 props ,因为当父组件重新渲染时,它的值将被覆盖。相反,使用基于 prop 值的数据或计算属性。正在被修改的 prop: "value"(位于 C:\xampp\htdocs\myshop\resources\assets\js\components\Star.vue 中)
该如何解决这个问题呢?
<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 中)
该如何解决这个问题呢?