$ refs.theReferenceが設定されているときにコードを実行する

Question

キャンバスを動的に表示/非表示にしていますが、表示しようとしているときに描画したいと思います。私はキャンバスの挿入/削除にdata変数（true/false）を使用し、この値が変更されたときにI watchを描画します。 Canvas DOMエレメントへの参照を取得するためにキャンバスにref=canvasを追加しましたが、watchコールバックが呼び出されたときにthis.$refs.canvasにはまだ値が割り当てられていません。ここで

は一例です：

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

setTimeoutで描画操作を延期するよりも、この他を解決するために何かいい方法はありますか？

Answer 1

Vuejsが提供する$nextTickメソッドを使用できます。
あなたは、ドキュメントでそれについての詳細を読むことができます：

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

canvas{ 
 
    background-color: red; 
 
}

<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>

：ここ

https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queueをご利用の場合の例です。