Как добавить в data переменную canvas и ctx в Vue, что бы использовать их в разных методах?

Question

[websjunior]

Использую канвас, в методах не видит ctx и canvas. Хелп

<template>
	<canvas id="canvas" ref="renderCanvas" width="300" height="300">canvas</canvas>
</template>

<script>
module.exports = {
  data: function () {
    return {
      canvas: 'canvas'
    }
  },
  methods: {
    // тут инициализация самых функций
    // Пишешь всё что связано с канваос, обращаться через ref
    // Пиши тут функции где будет спедоментр этот, я вызов функции этого компонента из родительского я сам скажу как.
    updateCanvas: function () {
      // вот тут денчик канвас на js рисовать
      let canvas = this.$refs.renderCanvas
      let ctx = canvas.getContext('2d')
      ctx.beginPath()
      ctx.moveTo(75, 50)
      ctx.lineTo(100, 75)
      ctx.lineTo(100, 25)
      ctx.fill()
    },
    editCanvas: function () {
      // вот тут денчик канвас на js рисовать
      let canvas = this.$refs.renderCanvas
      let ctx = canvas.getContext('2d')
      ctx.beginPath()
      ctx.moveTo(75, 50)
      ctx.lineTo(100, 35)
      ctx.lineTo(110, 25)
      ctx.fill()
    }
  },
  mounted: function () {
    this.updateCanvas()
    // тут функции при запуске страници которые будут выполняться
  }
}
</script>

Answer 1

[0xD34F]

Какое-то отдельное свойство для самого канваса не нужно - он доступен через ref.

Контекст - получаете после монтирования:

<canvas ref="canvas"></canvas>

data: () => ({
  ctx: null,
}),
mounted() {
  this.ctx = this.$refs.canvas.getContext('2d');
},

Ну и используете его:

methods: {
  updateCanvas() {
    const { ctx } = this;
    ...