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>

渲染效果：

点击按钮改变文字 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue