templates - Vue3 TypeError : template ref. 值为空

Question

如何从以下错误中清除我的控制台:
TypeError: ref.value is null该错误仅随调整大小事件一起出现。每次调整窗口大小时，都会渲染图表。所以错误信息一次又一次地出现。文档显示模板 ref 也初始化为空值 ( Source )。所以我必须在初始化之后做一些事情，对吧？
这是我的代码:

<template>
  <canvas
    ref="chartRef"
  />
</template>

<script setup>
// ...
// on resize
export const chartRef = ref(null)
export function createChart () {
  const ctx = chartRef.value.getContext('2d')
  if (ctx !== null) { // fix me
    getDimensions()
    drawChart(ctx)
  }
}
// ...
</script>

如何清理我的控制台以便不再出现错误消息？谢谢。

Answer 1

我有点晚了，但我在 Vue 3 中遇到了同样的问题。我通过返回引用解决了 juste:

<template>
  <input ref="myinput">
</template>


<script>
import { onMounted, ref } from 'vue'

export default {
  setup() {

    const myinput = ref(null) // Assign dom object reference to "myinput" variable

    onMounted(() => {
      console.log(myinput.value) // Log a DOM object in console
    })

    return { myinput } // WILL NOT WORK WITHOUT THIS
  }
}
</script>