vue 计算属性

Question

下面是写的一个计算属性，但是 span里不显示， console.log 都能打印

是哪出了问题

<span>{{areaUser}}</span>


  computed: {
    // 所属用户
    areaUser: function () {
      this.areaOptions.forEach( (element, index) => {
        if (element.id === this.temp.areaId) {
          console.log('这里可以打印')  
          return 11111111
        } 
      })
    }
  }

Answer 1

外层函数必须返回一个结果。

areaUser: function () {
  let value = "";
  this.areaOptions.forEach( (element, index) => {
    if (element.id === this.temp.areaId) {
      console.log('这里可以打印')  
      value = 1111111; //这里可以打印没有用！！！，必须把值传出去
      return 11111111
    } 
  });
  return value;//computed函数必须有返回值
}

Answer 2

计算属性需要一个返回值作为计算的结果的，你这里return了，但是是forEach的回调函数return的，不是计算属性return的，你需要作如下修改

areaUser: function () {
    var a;
    //forach无法退出循环，可能造成不必要的性能消耗，这里换成some
    this.areaOptions.some( (element, index) => {
        if (element.id === this.temp.areaId) {
            console.log('这里可以打印')  
            a = 11111111
            return true
        } 
    })
    return a
}

Answer 3

---

computed 的返回值会作为 最终结果。
因为 computed 只写一个函数的时候，会被转化成一个 get 函数。

    computend: {
        foo() {
            return this.dataArray.map(v=>v.id)
        }
    }