Vue.js v-for item，将属性绑定到当前索引/键

Question

<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 1

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>