Как отрисовать через v-for полученные значения с сервера?

Question

[Александр]

Здравствуйте! Получил данные с сервера:

axios.get(url
          ).then((response) => {
              response.data["detail"]["show_contact"] = false;
              this.show = response.data["detail"];
          }).catch((error) => {
            console.log(error);
          });

Далее отрисовываю это так:

<h3 v-for="(i, key) in show">{{key}} - {{i}} - {{i.key}}</h3>

Получаю на странице вот что:
about_company - About company huge -
our_life - [] -
contacts - { "phone": [], "mail": [], "skype": [], "icq": [] } =
show_contact - false -
key выводится, i выводится, а при прямом обращении к ключу ничего не выводится. Почему?

Answer 1

[Владимир Проскурин]

У вас show, это объект, значения которого являются другие объекты или массивы. Чтобы выводить объекты, нужно писать для них отдельный цикл v-for. Для массивов тоже, но можно также воспользоваться str.join(',')

Comments

[Александр]

Ключ about_company объекта show хранит в себе просто строку

[Владимир Проскурин]

Александр, ну, так выводите определенный шаблон, в зависимости от типа

<li v-for="(obj, key) in show" :key="key">
      <div class="array" v-if="Array.isArray(obj)">
        {{ obj.join(',') }}
      </div>
      <div class="object" v-else-if="typeof obj === 'object'">
        <p v-for="(val, name) in obj">{{ name }}: {{ val }}</p>
      </div>
      <div class="other" v-else>
        {{ obj }}
      </div>
    </li>