CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Muhsin VeeVees
Muhsin VeeVees

Reputation: 190

How to find width on components in vue.js

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']
});

I want to find the sum of width of all li in this example.

Upvotes: 3

Views: 11592

Answers (1)

Kirill Matrosov
Kirill Matrosov

Reputation: 5990

Add watch block to your script.

script

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);
 }
}

if scrollWidth > clientWidth, u can show your arrows.

Updated. Explain Fiddle

template

<tabs ref="ul">

Put ref on component otherwise instance doesnot know about it

script

this.$nextTick This function run method when dom is updated

Upvotes: 5

Related Questions