Menu
I can't seem to find the syntax to loop through my items and give each 'li' a class corresponding to the index. How is this done?
<li v-for="(item, idx) in items class="idx"">
</li>
951
Adding a dynamic class name is as simple as adding the prop :class="classname" to your component. Whatever classname evaluates to will be the class name that is added to your component. Join 11,067 other Vue devs and get exclusive tips and insights delivered straight to your inbox, every week.
The v-bind directive is a Vuejs directive used to bind one or more attributes, or a component prop to an element. If that attribute is binded to our data defined in Vuejs instance then dynamically changes can be observed as data changes.
v-bind shorthand Instead of writing v-bind Vue provides a shorthand with only a colon : .
v-bind is a one-way binding. v-model is used for binding form elements like inputs, radio buttons, textarea, checkboxes. It is used for binding data, attributes, expressions, class, styles. V-model is input value sensitive.
I think this would be most readable (added a prefix because a class can't start with a number).
<li v-for="(item, index) in items" :class="[`index--${index}`]"></li>
Also using an array because this always looked off to me.
:class="`index--${index}`"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
