vue中计算属性computed的getter setter问题

首先不应该使用箭头函数来定义计算属性函数 (例如 aDouble:() => this.a * 2)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向Vue 实例，this.a 将是undefined。需求如下：邮箱和编码联动：规则是邮箱是编码+@xx.com代码

miaolegemiyaha

19331人浏览 · 2017-11-02 16:33:17

miaolegemiyaha · 2017-11-02 16:33:17 发布

首先不应该使用箭头函数来定义计算属性函数 (例如 aDouble: () => this.a * 2)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

需求如下：

 
 邮箱和编码联动： 

 
 规则是邮箱是编码 
 +@xx.com 

  代码如下 

  this.add_customer_form.buyer_code为绑定编码 

  this.add_customer_form_email为绑定的邮箱 

 
 computed： 

    ok，没问题操作上面编码下面会联动； 
  

    but，懂你操作下面email的时候会报错： 
  

   vue.esm.js?101b:476 [Vue warn]: Computed property "add_customer_form_email" was assigned to but it has no setter. 
 

    这是因为没有给动态计算属性设置set。 
  
    然后我们这样： 
  
     but 还是会报错： 
   
     Error in event handler for "input": "RangeError: Maximum call stack size exceeded" 
   
     栈溢出 
   
     最后我用一个中间变量 add_customer_form_email_2 
   
     其实这里用 
    watch方法更简洁 建议动态计算的变量有操作的机会的话或类似的场景， 
   
     用watch 
   
 查了下vue中关于这块的源码：

 
   也就是传入的是一个函数，或者传入的对象里没有 set 属性，当你尝试直接该改变这个这个计算属性的值，都会报这个错误。 
  

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}$/, //不连续的两位字母// /^