Vue.js计算属性使用Props报错：error during evaluation问题排查

你遇到的问题核心是回调函数中的this指向错误。在普通function作为map的回调时，函数内部的this并不指向Vue实例，所以无法访问this.plotDt，导致VueTools报错"error during evaluation"。

下面给你三种可行的修复方案：

方案1：使用箭头函数（推荐） #

箭头函数不会绑定自己的this，它会继承外层作用域的this（也就是当前Vue实例），这样就能正常访问this.plotDt了：

display() {
  return this.labs.map((x, i) => [x, this.plotDt[i]]);
}

方案2：提前保存Vue实例的this #

在回调函数外部把this赋值给一个变量（比如vm），然后在回调里使用这个变量访问实例属性：

display() {
  const vm = this;
  return this.labs.map(function(x, i) {
    return [x, vm.plotDt[i]];
  });
}

方案3：利用map的第二个参数指定this #

Array.prototype.map方法支持第二个参数，用来指定回调函数执行时的this指向：

display() {
  return this.labs.map(function(x, i) {
    return [x, this.plotDt[i]];
  }, this);
}

这三种方案都能解决你的问题，当输入['a','b','c']和[1,2,3]时，都会返回期望的[['a',1],['b',2],['c',3]]。

内容的提问来源于stack exchange，提问作者Alex T