Vue. js - печатать только значение вместо JSON нотации ключ-значение? - PullRequest
Новая
       73

Vue. js - печатать только значение вместо JSON нотации ключ-значение?

1 голос
/ 16 марта 2020

Соответствующая разметка выглядит следующим образом: 

<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 нотация ^^ как я могу это сделать?

Ответы [ 4 ]

2 голосов
/ 16 марта 2020

Поскольку у вас есть некоторые поля, которые являются объектами, а некоторые нет, вам нужно проверить это. Вот один из способов сделать это: 

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

Вот демо

1 голос
/ 16 марта 2020

Нечто подобное должно работать. Однако может оказаться более эффективным просто отобразить данные перед их помещением в шаблон. 

<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>
1 голос
/ 16 марта 2020

Вы можете получить значение и имя (Ключ) из объекта и использовать его как-то так: 

 < td v-for="(value, name) in object">
     {{ value }}
 </td >
0 голосов
/ 17 марта 2020

Я нашел решение, которое соответствует моим потребностям, вот разметка, которая соответствующим образом обрабатывает структуру данных, показанную в 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>
...