Vue.js - print only value instead of JSON key-value notation?

Question

The relevant markup looks like this:

<table>
  <tbody>
    <tr v-for="object in tableData">
      <td v-for="field in object">{{field}}</td>
    </tr>
  </tbody>
</table>

The data basically looks like this:

{
    Internal_key: "TESTKEY_1",
    extensiontable_itc: {
        description_itc: "EXTENSION_ITC_1"    ​
    },
    extensiontable_sysops: {
        description_sysops: "EXTENSION_SYSOPS_1"
    }    
}

​​​This type of object resides within an array. There might be any number of these objects inside this array.

Currently, this setup creates this output inside myList.vue:

https://i.sstatic.net/nVd9Z.jpg

Now, I only want the values to show up, not this key-value JSON notation ^^ how can I do that?

Answer 1

Since you have some fields which are objects and some which are not, you need to test that. Here's one way to do it:

<tr v-for="object in data">
  <td v-for="field in object">
    <template v-if="typeof field === 'object'">
      <div v-for="item in field">
        {{ item }}
      </div>
    </template>
    <template v-else>
      {{ field }}
    </template>
  </td>
</tr>

Here is a demo