はどのようにvue.js

Question

HTML内のコンポーネントに幅を見つけるために

Vue.component('tabs', { 
    template:'<li :class="tabselected"><a href="#">{{name}}</a></li>', 
    props:['name','tabselected'] 
}); 

私は、この例では、すべてのLiの幅の合計を見つけたいです。

Answer 1

スクリプトにウォッチブロックを追加します。

スクリプト

watch: { 
    'tabelements': function (val) { 
     var lis = this.$refs.ul.getElementsByTagName("li"); 
     for (var i = 0, len = lis.length; i < len; i++) 
     { 
      console.log(lis[i].clientWidth); // do something 
     } 
     console.log(this.$refs.ul.clientWidth, this.$refs.ul.scrollWidth); 
    } 
    } 

scrollWidth> clientWidth場合、uがあなたの矢印を表示することができます。

更新されました。コンポーネントのFiddle

テンプレート

<tabs ref="ul"> 

入れREFを説明しそうでない場合は、知っているdoesnotそれについて

スクリプトDOMが更新され

this.$nextTick この関数runメソッド