时间戳

首页 > 解决方案 > 在 Vue CLI 中，与 this.VariableName 一起使用时，data 属性中定义的变量不起作用

javascript - 在 Vue CLI 中，与 this.VariableName 一起使用时，data 属性中定义的变量不起作用

问题描述

问题

我想在里面使用一个变量，mounted()并methods:因此在data()里面的属性中定义它export default {}。虽然没有记录错误，但它不起作用。我怎样才能解决这个问题？

设置

我在vue 版本 3.9.3和npm 版本 6.10.2上运行。我正在使用织物（Javascript HTML5 画布库）库，这是我的问题的一部分。

工作，但不完整的解决方案

首先，我定义了一个变量，在mounted()该变量中，所有用这个变量调用的函数都可以正常工作mounted()

var canvas = new fabric.Canvas("canvas", {
    isDrawingMode: true
});

不工作的解决方案

然后，因为我也想在里面使用这个变量，所以我把属性里面methods:的内容是这样的：var canvasdata()

data() {
    return {
      canvas: new fabric.Canvas("canvas", { isDrawingMode: true }),
      canvasControlBar: {
        color: "#29066b"
      }
    };
  },

然后我methods:使用了这行代码：

clearCanvas() {
    this.canvas.clear();
}

canvas.clear()除了 chrome 控制台显示它们略有不同外mounted()，两者的 console.log 都this.canvas.clear()相同。

我希望使用new fabric.Canvas("canvas", { isDrawingMode: true })在两者中定义的变量，mounted()和methods:。

完整代码

Codepen.io 上的完整代码

控制台日志

  1. mounted()第一个日志来自内部console.log(canvas.clear());
  2. 第二个日志是从data:里面console.log(this.canvas.clear()); 控制台登录 Chrome

标签： javascriptvariablesvue.jsfabricjsvue-cli

解决方案

使用计算属性而不是数据

我没有把它存放var canvas在里面data()，而是把它存放在里面computed:。因此，我使用了以下代码：

computed: {
    canvas() {
      return new fabric.Canvas("canvas", { isDrawingMode: true });
    }
  },

然后我methods:使用了：

this.canvas.clear();

在 Codepen.io 上查看完整的更新代码

推荐阅读