vue在脚本中使用JS参考元素

Question

因此，我正在关注Stackoverflow 使用JavaScript使用Javascript 将文本转换为image 但是在Vue JS中。我似乎无法实现此操作，这使我这个错误

serve.vue?bf12:27 Uncaught TypeError: Cannot read properties of null (reading 'getContext')
    at eval (serve.vue?bf12:27:1)
    at Object../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./dev/serve.vue?vue&type=script&lang=js (app.js:997:1)
    at __webpack_require__ (app.js:849:30)
    at fn (app.js:151:20)
    at eval (serve.vue?5c0c:1:1)
    at Module../dev/serve.vue?vue&type=script&lang=js (app.js:962:1)
    at __webpack_require__ (app.js:849:30)
    at fn (app.js:151:20)
    at eval (serve.vue?061e:1:1)

在这里是我的代码，这很简单

<template>
  <div id="app">
    <canvas id="textCanvas" height="20" />
    <img id="image" />
    <br />
    <textarea id="text" />
  </div>
</template>

<script>
var tCtx = document.getElementById("textCanvas").getContext("2d"), //Hidden canvas
  imageElem = document.getElementById("image");

document.getElementById("text").addEventListener(
  "keyup",
  function () {
    tCtx.canvas.width = tCtx.measureText(this.value).width;
    tCtx.fillText(this.value, 0, 10);
    imageElem.src = tCtx.canvas.toDataURL();
    console.log(imageElem.src);
  },
  false
);
</script>

Answer 1

当您调用document.getElementById（'textCanvas'）时，渲染引擎尚未在时间点渲染HTML。

实际上，老实说，您的代码几乎根本不存在。 Vue具有一个名为已安装的寿命挂钩，该挂钩发生在渲染引擎完成渲染组件时发生。为了使用它，您将上述代码转换为实际VUE。

类似于此类似的东西：

<template>
  <div id="app">
    <canvas ref="canvas" height="20" />
    <img id="image" />
    <br />
    <textarea @keyup="handleKeyUp" />
  </div>
</template>

<script>
export default {
  computed: {
    canvas() {
      return this.$refs.canvas;
    }; 
  },
  methods: {
    handleKeyUp() {
       // Do your thing with "this.canvas"
    }
  }
}
</script>

我真的建议您学习Vue的基本概念和语法，然后才进入类似的事情。