Как вывести элементы вложенного объекта?

Question

[Тамерлан Годжиев]

Помогите с выводом элементов.

Вывожу объект

<ul class="list-group" id="v-for-object">
  <li v-for="value in object" class="list-group-item">{{ value }}</li>
</ul>

Но он содержит и вложенный объект:

data: {
        object1: {
            firstName: 'Bruce Lee',
            userName: 'Dragoon',
            email: '[e-mail]',
            adress: {
                country: 'China',
                town: 'Gong-kong'
            },
        }

В итоге adress выводится вот так:
{ "country": "China", "town": "Gong-kong" }

Как мне просто вывести название China и Gong-kong?

Answer 1

[0xD34F]

Можно сделать метод, который преобразует объект так, чтобы вложенности не было:

methods: {
  plainObj(obj) {
    return Object.entries(obj).reduce((acc, [ k, v ]) => {
      if (v instanceof Object) {
        Object.assign(acc, this.plainObj(v));
      } else {
        acc[k] = v;
      }
      return acc;
    }, {});
  }
}

<li v-for="value in plainObj(object)" class="list-group-item">{{ value }}</li>

Или сделать рекурсивный компонент:

Vue.component('list-obj', {
  template: `
<ul class="list-group">
  <li v-for="value in obj" class="list-group-item">
    <list-obj v-if="value instanceof Object" :obj="value"></list-obj>
    <span v-else>{{ value }}</span>
  </li>
</ul>`,
  props: [ 'obj' ]
});

<list-obj :obj="object"></list-obj>