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

Question

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

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

如何在key的孩子的属性中绑定li？它只适用于li本身。

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>