使用 'v-for' 将对象输出到列表答案

【问题标题】：using 'v-for' to output object to list使用 'v-for' 将对象输出到列表
【发布时间】：2018-10-17 09:18:13
【问题描述】：

我有一个使用各种键/值动态更新的对象，大部分情况下如下所示：

object: {
    parentKey1:{
        childKey1:'value', 
        childKey2:'value'
        },
    parentKey2:{
        childKey3:'value', 
        childKey4:'value'
        }
    }

然后我在列表中使用“v-for”来导出对象，如下所示：

<ul>
    <li v-for="(value, key) in object">{{ key }} - {{ value }}</li>
</ul>

现在，它通常以我想要的方式在 DOM 上显示，除了它在值周围打印出 {} 大括号。

PARENT - { "CHILD": "VALUE" }

我希望它是：

PARENT - CHILD VALUE

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

试试这个

new Vue({
  el: '#app',
  data: {
    object: {
      parentKey1: {
        childKey1: 'value',
        childKey2: 'value'
      },
      parentKey2: {
        childKey3: 'value',
        childKey4: 'value'
      }
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <div v-for="(value, key) in object">
    {{key}} -
    <span v-for="(cvalue, ckey) in value">
         {{ ckey }}  {{ cvalue }} {{' '}}
    <span>
  </div>
</div>

【讨论】：

【解决方案2】：

您需要提供一个新的嵌套迭代来执行此操作。

<ul>
    <li v-for="(parentValue, parentKey) in object">
      <template v-for((childValue, childKey) in parentValue)>
        {{ parentKey }} - {{ childKey }} {{ childValue }}
      </template>
    </li>
</ul>

【讨论】：

【解决方案3】：

这个值仍然是一个数组，这就是为什么它会这样显示。

不妨试试

<ul>
    <li v-for="(value, key) in object">{{ key }} - <span v-for="val in value">{{ val }}</span></li>
</ul>

【讨论】：