v-за Vue.js элемент, атрибут привязки к текущему индексу/ключ

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 «s? Он работает только в li.

Answer 1

Это работает как ожидается для меня. Если вы проверите элементы в приведенном ниже фрагменте, вы увидите, что класс назначен.

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>