How does vue get the elements in the pop-up box with element?

how does vue get the elements in the pop-up box with element?
html Code:

< el-dialog title= "score": visible.sync= "score1" >

<div>
      <canvas id="myChart" width="400px" height="400px"></canvas>
</div>

< / el-dialog >

js Code:
mounted () {

var myChart = document.getElementById("myChart");
console.log(myChart)         null

}

Oct.21,2021

   mounted() {
     this.$nextTick(function () {
        var myChart = document.getElementById("myChart");
        console.log(myChart)         //
     })
   }


to get the element, use ref

<el-dialog title="" :visible.sync="score1">
    <div>
          <canvas id="myChart" width="400px" height="400px" ref="myChart"></canvas>
    </div>
</el-dialog>
//js:
mounted() {
this.$$nextTick(()=>{
    var myChart = this.$refs.myChart
    console.log(myChart)
    })        
}

one more thing, you promised to print it in mounted. First of all, you have to make sure that the node you want to print is mounted when mounted executes. If not, it will not be printed.


element should be generated when the pop-up box is displayed, so it should be

.
openDialog(){
    this.score1=true;
    this.$nextTick(()=>{
        let myChart = document.getElementById("myChart");
    })
}

then try

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3d5dd-2c390.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3d5dd-2c390.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?