부에가 있는 칸에 캔버스를 넣으려면 어떻게 해야 할까?

부에가 있는 칸에 캔버스를 넣으려면 어떻게 해야 할까?

나는 Vue를 처음 보는데 이 프로젝트를 위해 캔버스를 칸 안에 넣으려고 했다.캔버스가 div 외부에 로드된 경우 올바르게 작동하지만 다음 경우 캔버스를 표시하려고 함loadModal오직 진실일 뿐이다.이 코드에서 나는 두 개의 캔버스를 사용했다. 하나는 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();
    }
  }
})

시도하다v-show모든 div를 선택할 수 있도록 id 대신 class를 사용하십시오.

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>

문제는runModal()놓다loadModal로true그리고 즉시 그 사실을 언급하려고 한다.<canvas>조건부로 되어 있는 안.<div v-if="loadModal">, 그러나 .<div>(그리고 그것들)<canvas>)은 아직 렌더링되지 않았다.의 영향loadModal다음 렌더 사이클까지 변경이 완료되지 않음.그<canvas>바깥에<div>조건적으로 렌더링되지 않았기 때문에 "정확하게" 올바르게 표시됨.

한 가지 해결책은 콜백을 통해 다음 렌더링 사이클에 액세스하기 전에<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".

참조URL: https://stackoverflow.com/questions/69530445/how-can-i-load-a-canvas-inside-a-div-with-vue