Vue Js 中 Key 和 Value 是如何迭代的

Question

我正在尝试使用 vue.js 中的键和值迭代波纹管数组。

attributes = {"Size - UK":"12","Color":"White"}.

此 array 从数据库获取为 string

我想要如下结果

Size : 12 Color : White

我使用下面的方法来做到这一点

 <span :v-for="(item, index) in attributes">
     {{item}} : {{index}}
 </span>

我遇到了这样的错误。

Property or method "index" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

我该如何解决这个问题？

Answer 1

试试这个：

<span v-for="key in Object.keys(attributes)">
     {{key}} : {{attributes[key]}}
 </span>

Answer 2

v-for 属性不应有 :（参见 docs）

移除 : 试试这个：

// https://codepen.io/collection/naevzw/
var example1 = new Vue({
  el: '#example-1',
  data: {
    items:
      { message: 'Foo', text: 'Bar', other: 'FooBar' }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- v-for - VUE.js Guide Example -->
<ul id="example-1">
  <li v-for="(key) in Object.keys(items)">
    {{ key }} : {{ items[key] }}
  </li>
</ul>

Vue Js 中 Key 和 Value 是如何迭代的

How Key and value Iterate in Vue Js

loops

for-loop

vue.js

vue-component

v-for