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

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

1 个答案: