Question

我有一个对象，该对象会使用各种键/值进行动态更新，在大多数情况下，其外观如下：

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

Answer 1

您需要提供一个新的嵌套迭代。

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

Answer 2

尝试一下

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>

Answer 3

该值仍然是一个数组，这就是为什么要这样显示的原因。

也许尝试

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

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

3 个答案: