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">&nbsp; <td v-for="field in object">&nbsp; &nbsp; <template v-if="typeof field === 'object'">&nbsp; &nbsp; &nbsp; <div v-for="item in field">&nbsp; &nbsp; &nbsp; &nbsp; {{ item }}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </template>&nbsp; &nbsp; <template v-else>&nbsp; &nbsp; &nbsp; {{ field }}&nbsp; &nbsp; </template>&nbsp; </td></tr>

Answer 2

像这样的东西应该工作。但是，在将数据放入模板之前仅映射数据可能更有效。<template v-for="field in object">&nbsp; &nbsp; <td v-if="null !== field && typeof(field) === 'object'">&nbsp; &nbsp; &nbsp; &nbsp; <span v-for="thingy in field">{{ thingy }}</span>&nbsp; &nbsp; </td>&nbsp; &nbsp; <td v-else>{{ field }}</td></template>

Answer 3

我找到了一个适合我需要的解决方案，这里是相应地处理 OP 中显示的数据结构并动态生成所需列表的标记：<template v-for="element in tableData">&nbsp; <tr>&nbsp; &nbsp; &nbsp; <template v-for="field in element">&nbsp; &nbsp; &nbsp; &nbsp; <template v-if="typeof field==='object'">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td v-for="nestedObjectValue in field">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{nestedObjectValue}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; </template>&nbsp; &nbsp; &nbsp; &nbsp; <template v-else>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{field}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; </template>&nbsp; &nbsp; &nbsp; </template>&nbsp; &nbsp; &nbsp; <td><button v-on:click="changeRecord">Aendern</button></td>&nbsp; </tr></template>