Question

我动态显示/隐藏画布，当它即将显示时，我想要画画。我使用data变量（true / false）来插入/删除画布，并在此值更改时使用watch来绘制它。我在画布上添加了ref=canvas以获取对canvas DOM元素的引用，但是当调用watch回调时，this.$refs.canvas尚未分配任何内容价值。

以下是一个例子：

http://jsfiddle.net/3v9Lbjbr/3/

除了使用setTimeout推迟绘图操作之外，还有什么方法可以解决这个问题吗？

Answer 1

您可以使用Vuejs提供的$nextTick方法您可以在文档中详细了解它：https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue

以下是您的用例示例：

＆＃13;

var demo = new Vue({
    el: '#demo',
    data: {
        showCanvas: false,
    },
    methods: {
    	show: function(){
      	this.showCanvas = true
      }
    },
    watch: {
      'showCanvas': function() {
        this.$nextTick(function() {
          alert(this.$refs.canvas);
        }.bind(this))
      }
    }
})

＆＃13;

canvas{
  background-color: red;
}

＆＃13;

<div id="demo" v-cloak>
   <p v-on:click="show">
   Show canvas.
   </p>
   <canvas v-if="showCanvas" ref="canvas"></canvas>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

＆＃13;

设置$ refs.theReference时运行代码

1 个答案: