报错信息:
[Vue warn]: Computed property “messageCom” was assigned to but it has no setter.
原文含义:计算属性messageCom被定义了但是没有setter属性,也就是不能给这个计算属性赋值
原因:计算属性默认只有getter,没有setter,所以计算属性不支持数据的修改,只能对data中的数据进行引用计算。
如果实在想通过计算属性修改data中的值,从而使得计算属性的值也被修改的话,可以自定义setter和getter方法
<div id="app">
<to-item v-bind:[itemname]="messageCom"></to-item>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
Vue.component('to-item', {
props: ['todo'],
template: '<span>{{ todo }}</span>',
})
const vue = new Vue({
el: '#app',
data: {
message: '页面加载于' + new Date().toLocaleString(),
seen: true,
itemname: 'todo'
},
computed: {
messageCom: {
set(dataV) {
this.message = dataV;
},
get() {
return this.message;
}
}
}
})
</script>
当修改数据vue.messageCom = 2
的时候,相应的data中的数据this.message
就会被修改,此时由于messageCom依赖于message,所以messageCom重新开始计算。