當設置$ refs.theReference時運行代碼

我正在動態地顯示/隱藏畫布，以及何時會顯示畫布，我想畫畫。我使用一個data變量（true/false）插入/移除畫布，並在此值改變時使用它watch進行繪製。我在畫布上添加了一個ref=canvas以獲得對畫布DOM元素的引用，但是當我的watch回調被調用時，this.$refs.canvas尚未分配任何值。

下面是一個例子：

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

解決這個除了與setTimeout推遲繪圖操作什麼好辦法？

來源

2016-12-04 Peppe L-G

您可以使用Vuejs提供的$nextTick方法。
您可以在文檔閱讀更多關於它：https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue

這裏是爲您的使用情況的一個例子：

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>

來源

2016-12-04 16:59:53

當設置$ refs.theReference時運行代碼

回答

相關問題