Vue Js中键和值的迭代方式

问题描述

我正在尝试在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

我该如何解决？

解决方法

尝试一下：

JSONDecoder

,

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>