回调中的参考道具

Question

我试图在 vue-chartjs 的回调中引用 vue 道具，但它无法解析 'this'，并且我在控制台日志中收到 'undefined' 错误。引用道具的正确方式是什么？

props: {
  test: {
    type: String,
    required: true,
  },
}
data: () => ({
  chartOptions: {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
            console.log(this.test);
            return '';
        }
      }
    }
  }
});

Answer 1

尝试使用箭头函数并将 chartOptions 定义为计算 属性 :

computed:{
  chartOptions(){
    return {
      tooltips: {
         callbacks: {
        label: (tooltipItem, data)=> {
            console.log(this.test);
            return '';
        }
      }
    }
  }
}

}

Answer 2

如果你想在你的 data 中使用 this 你必须使用一个普通函数，这样 this 关键字可以正确绑定到 Vue 实例..

export default {
    props: {
        test: {
            type: String,
            required: true,
        },
    },
    data() {
        const vm = this
        return {
            chartOptions: {
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            console.log(vm.test);
                            return '';
                        }
                    }
                }
            }
        }
    }
}