используя 'v-for' для вывода объекта в список

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>