vue用element弹框如何获取弹框中的元素？

Question

vue用element弹框如何获取弹框中的元素？
html代码：

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

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

</el-dialog>

js代码：
mounted() {

var myChart = document.getElementById("myChart");
console.log(myChart)         这里输出的是null

}

Answer 1

element 应该是弹框显示出来的时候才生成元素的吧, 所以应该在

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

这样你试试

Answer 2

   mounted() {
     this.$nextTick(function () {
        var myChart = document.getElementById("myChart");
        console.log(myChart)         //这样写去获取
     })
   }

Answer 3

获取元素的话，用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)
    })        
}

还有一点，你答应是在mounted里面打印的，你首先要确定当mounted执行的时候，你要打印的那个节点有没有被挂载，没有的话肯定是打印不出来的。