来自回调的参考道具

Question

我试图在 vue-chartjs 的回调中引用 vue 道具，但它无法解决“this”，并且在控制台日志中出现“未定义”错误。引用 props 的正确方法是什么？

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

Answer 1

如果你想在你的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 '';
                        }
                    }
                }
            }
        }
    }
}

Answer 2

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

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

}