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 表示法^^ 我该怎么做？

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>

Answer 2

像这样的东西应该工作。但是，在将数据放入模板之前仅映射数据可能更有效。

<template v-for="field in object">

    <td v-if="null !== field && typeof(field) === 'object'">

        <span v-for="thingy in field">{{ thingy }}</span>

    </td>

    <td v-else>{{ field }}</td>

</template>

Answer 3

我找到了一个适合我需要的解决方案，这里是相应地处理 OP 中显示的数据结构并动态生成所需列表的标记：

<template v-for="element in tableData">

  <tr>

      <template v-for="field in element">

        <template v-if="typeof field==='object'">

          <td v-for="nestedObjectValue in field">

            {{nestedObjectValue}}

          </td>

        </template>

        <template v-else>

          <td>

            {{field}}

          </td>

        </template>

      </template>

      <td><button v-on:click="changeRecord">Aendern</button></td>

  </tr>

</template>