How to draw received values ​​from the server through v-for?

Question

Vue.js

Hello! Got data from server:

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

Next, I draw it like this:

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

I get this on the page:
about_company - About company huge -
our_life - [] -
contacts - { "phone": [], "mail": [], "skype": [], "icq": [] } =
show_contact - false -
key is displayed, i is displayed, and when accessing the key directly, nothing is displayed. Why?

Answer 1

You have show, which is an object whose values ​​are other objects or arrays. To display objects, you need to write a separate v-for loop for them. For arrays too, but you can also use str.join(',')