NestedWeb NestedWeb - 1 year ago 240
Javascript Question

Vue.js v-for item, bind attribute to current index / key

<li v-for="(value, key) in {facebook: [data], twitter: [data]}">
<i class="icon" :class="key"></i>
....
</li>


Error:
[Vue warn]: Trying to access non-existent property "key" while rendering.


How can I bind
key
in attributes of
li
's children? It only works in
li
itself.

Answer Source

It works as expected for me. If you inspect the items in the snippet below, you'll see the class is assigned.

new Vue({el: 'body'});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<li v-for="(key, value) in {facebook: ['data'], twitter: ['data']}">
  <i class="icon" :class="key">{{key}}</i>
</li>