javascript - Vue.js - 仅打印值而不是 JSON 键值表示法？

Question

相关标记如下所示：

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

数据基本上是这样的：

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

​​​这种类型的对象驻留在数组中。这个数组中可能有任意数量的这些对象。

目前，这个设置在 myList.vue 中创建了这个输出：

https://imgur.com/a/GsbqOlC

现在，我只想显示这些值，而不是这个键值 JSON 表示法^^ 我该怎么做？

标签： javascripthtmlvue.jsvuejs2v-for

Answer 1

由于您有一些字段是对象，而有些字段不是，您需要对其进行测试。这是一种方法：

<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>

这是一个演示