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

最新推荐文章于 2024-04-28 15:59:17 发布

灵灵7

最新推荐文章于 2024-04-28 15:59:17 发布

阅读量1.4w

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_41796631/article/details/84865464

版权

vue 专栏收录该内容

68 篇文章 5 订阅

订阅专栏

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(){ }}）

<body>
 <div id="demo">
<transition>
  <button v-bind:key="docState" v-on:click="change">
    {{ buttonMessage }}
  </button>
</transition>
</div>
 
<script>
//computed 计算属性，

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'
    }},
		set:function(){
			}}
	},
	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;}
	}
  }
})

</script>