Я действительно новичок в Vue, и для этого проекта я пытался загрузить холст внутри div. Если холст загружен вне div, он работает правильно, но я хочу отображать холст, только если loadModal истинно. В этом коде я использовал два холста: один находится внутри div, а другой - за пределами div. Он правильно загружает холст только за пределами div. Есть ли способ загрузить холст внутри div? Вот мой код ниже на JsFiddle

Код JsFiddle = https://jsfiddle.net/ujjumaki/6vg7r9oy/9/

Просмотр

<div id="app">
  <button @click="runModal()">
  Click Me
  </button>
  <br><br>
  <div v-if="loadModal == true">
    <canvas id="myCanvas" width="200" height="100" style="border:3px solid #d3d3d3; color:red;">
    </canvas>
  </div>
  
  <!-- this one loads correctly -->
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
  </canvas>
</div>

Метод

new Vue({
  el: "#app",
  data: {
    loadModal: false,
  },
  methods: {
    runModal(){
        this.loadModal = true;
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.beginPath();
      ctx.arc(95, 50, 40, 0, 2 * Math.PI);
      ctx.stroke();
    }
  }
})
3
Yahoo 11 Окт 2021 в 20:44

2 ответа

Лучший ответ

Попробуйте использовать v-show и класс вместо id, чтобы вы могли выбрать все div:

new Vue({
  el: "#app",
  data: {
    loadModal: false,
  },
  methods: {
    runModal(){
        this.loadModal = true;
      const c = document.querySelectorAll("canvas");
      c.forEach(can => {
        let ctx = can.getContext("2d");
        ctx.beginPath();
        ctx.arc(95, 50, 40, 0, 2 * Math.PI);
        ctx.stroke();
      })
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
li {
  margin: 8px 0;
}
h2 {
  font-weight: bold;
  margin-bottom: 15px;
}
del {
  color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="runModal()">
  Click Me
  </button>
  <br><br>
  <div v-show="loadModal == true">
    <canvas class="canvas" id="myCanvas" width="200" height="100" style="border:3px solid #d3d3d3; color:red;">
    </canvas>
  </div>
  <canvas class="canvas" id="myCanvas" width="200" height="100" style="border:3px solid #d3d3d3; color:red;">
  </canvas>
</div>
1
Nikola Pavicevic 11 Окт 2021 в 18:31

Проблема в том, что runModal() устанавливает loadModal в true и немедленно пытается сослаться на <canvas> внутри условно визуализированного <div v-if="loadModal">, но <div> (и его <canvas>) еще не обработаны еще . Эффект от изменения loadModal не проявляется до следующего цикла рендеринга. <canvas> за пределами <div> "загружается" правильно, потому что не отображается условно.

Одно из решений - await следующий цикл рендеринга с $nextTick() обратным вызовом перед пытается получить доступ к <canvas>:

new Vue({
  methods: {
    async runModal() {
      this.loadModal = true;

      // await next render cycle
      await this.$nextTick();

      // <canvas id="myCanvas"> is available here
      var c = document.getElementById("myCanvas");
      ⋮
    }
  }
})

обновленная скрипка

В качестве альтернативы, использование <div v-show="loadModal"> (как описано в другом ответе) также работает, потому что <canvas> уже отображается в документе и, следовательно, доступен для запроса. Если вы предпочитаете лениво отображать, <canvas>, придерживайтесь v-if="loadModal".

0
tony19 11 Окт 2021 в 22:27