How to find width on components in 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']
});

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

Is there any way i can loop through each li. get it individual width — Muhsin VeeVees
– Muhsin VeeVees, Commented May 4, 2017 at 8:16

Shaya Ulman · Accepted Answer · 2019-10-23 06:59:46Z

5

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

edited Oct 23, 2019 at 6:59

Shaya Ulman

1,7111 gold badge18 silver badges31 bronze badges

answered May 4, 2017 at 9:30

Kirill Matrosov

6,0404 gold badges30 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muhsin VeeVees Over a year ago

it is not working for me . can you show it in this jsfiddle.net/k0ht01tj

Collectives™ on Stack Overflow

How to find width on components in vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related