bug例子:计算属性没有setter.Computed property "xxxx" was assigned to but it has no setter.

bug 提示:计算属性没有设置 setter 

原因:计算属性中没有设置 setter 

有bug 代码

new Vue({
  el: '#demo',
  data:{ 
  	docState:"saved"
  },
  computed: {
 	 buttonMessage:{
	 	get:function (){
			switch (this.docState) {
     		case 'saved': return 'Edit'
     		case 'edited': return 'Save'
     		case 'editing': return 'Cancel'
    }}}
	},
	methods:{
		change:function(){		
			switch (this.buttonMessage) {
      		case 'Edit': this.buttonMessage='Save'
			this.docState='edited'
			break; 
     		case 'Save': this.buttonMessage='Cancel'
			this.docState='editing'
			break;
     		case 'Cancel': this.buttonMessage= 'Edit'
			this.docState='saved'
			break;}
	}
  }
})

修改后完整代码:(computed 部分加入 set:function(){ }}) 


 

渲染效果:

点击按钮改变文字 

你可能感兴趣的:(vue)