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

【问题标题】：Vue.js - print only value instead of JSON key-value notation?Vue.js - 仅打印值而不是 JSON 键值表示法？
【发布时间】：2020-03-16 15:24:07
【问题描述】：

相关标记如下所示：

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

【问题讨论】：

如果要显示description_itc字段的值，必须使用{{field.description_itc}}
您正在遍历一个对象，该对象可能将嵌套对象设置为属性值。在您的场景中，嵌套对象包含一个键/值对。总是这样吗？如果嵌套对象包含 0 个或多于 1 个属性，会发生什么？例如extensiontable_itc 设置为{a: "some value", b: "another value"}
@3limin4t0r 不一定总是如此。这些嵌套对象可以包含任意数量的属性/键值对。您的示例正确地假设了这一点。
您是否已经考虑过如何在单个 <td> 元素中显示所有这些值？您目前有三列，分别对应"Internal_key"、"extensiontable_itc" 和"extensiontable_sysops"。这意味着"extensiontable_itc" 字段应该包含嵌套对象的所有值。这是本意吗？还是打算为嵌套对象中的每个属性创建单独的列？
@3limin4t0r 的目的是为嵌套对象中的每个属性创建单独的列，是的！ :)

标签： javascript html vue.js vuejs2 v-for

【解决方案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>

这是demo

【讨论】：

你的方法就像一个魅力！！！！但是，关于 {{ Object.values(field)[0] }}。这仅在对象仅包含一个属性时才有用。但是，该对象可能包含任意数量的属性（当然除了 0...或更少：D）。我怎样才能做到这一点？ ;)
好的。代码或屏幕截图中没有提到这一点或示例（每个对象只有 1 个属性）。我编辑了答案以列出彼此下方的任意数量的属性。

【解决方案2】：

您可以从对象中获取值和名称（键）并使用它；

 < td v-for="(value, name) in object">
     {{ value }}
 </td >

【讨论】：

谢谢，但不幸的是到目前为止行为没有改变，但仍然感谢您对 vue 及其 v-for 的深入了解！ :)

【解决方案3】：

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

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

【讨论】：

谢谢，你能告诉我这里的数据“映射”是什么意思吗？或者指出我解释的地方？

【解决方案4】：

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

https://imgur.com/IVzn1ZZ

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

【讨论】：