NestedWeb NestedWeb - 3 months ago 54
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

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>