this.$refs.canvas 在 vuejs 中未定义

Question

我正在使用vuejs3 和canvas 设置一个新项目，但我被困在canvas 元素中。谁能给我一些建议或想法？

在我的项目中，我得到了undefined 和this.$refs.canvas。另外，当我使用document.getElementById('canvas') 时，我得到null。

<template>
  <div id="app">
    <canvas
      ref="canvas"
      id="canvas"
      class="bg"
      width="400"
      height="400"></canvas>
  </div>
</template>

<script>

export default {
  name: 'app',
  data() {
    return {
    }
  },
  created() {
    // const canvas = this.$refs.canvas.getContext('2d') 
    const canvas = document.getElementById('canvas')
    console.log(canvas)
  },
}
</script>

如果有人能给我一些帮助，我们将不胜感激。

Answer 1

元素还不会在created 中呈现。试试mounted。

<template>
  <div id="app">
    <canvas
      ref="canvas"
      id="canvas"
      class="bg"
      width="400"
      height="400"></canvas>
  </div>
</template>

<script>

export default {
  name: 'app',
  data() {
    return {
    }
  },
  mounted() {
    const canvas = this.$refs.canvas.getContext('2d') 
    console.log(canvas)
  },
}
</script>

在此处查看生命周期图：https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram