Vue.js

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>

这是一个demo

Answer 2

您可以从对象中获取值和名称(Key)，并像这样使用它；

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

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

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

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

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

html

javascript

vuejs2

v-for