如何在vue.js中找到组件的宽度

Question

HTML:

<ul class="nav nav-tabs nav-style">
  <tabs
    v-for="tabelement in tabelements" :name="tabelement":tabselected="tabelement == type ?  'active': ''" v-on:click="tabclick(tab)"
  ></tabs>
</ul>

JS:

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,你可以显示你的箭头.

更新.解释小提琴

模板

<tabs ref="ul">

将ref放在组件上,否则实例不知道它

脚本

this.$nextTick 更新dom时此函数运行方法