Как сделать рендеринг в шаблоне vueJS во время цикла при получении динамических c форматов - PullRequest
Новая
       3

Как сделать рендеринг в шаблоне vueJS во время цикла при получении динамических c форматов

1 голос
/ 09 апреля 2020

У меня есть таблица в шаблоне vue, как показано ниже, 

<table class="table vmiddle no-padding hover table-striped" id="match-expressions">
    <thead>
        <tr>
            <td><strong>Attribute Name</strong></td>
            <td><strong>Expression</strong></td>
            <td><strong>Value</strong></td>
        </tr>
    </thead>
    <tbody>
        <template v-if="subtypes['filter']['match_expressions']">
            <tr v-for="(match_expressions,id) in subtypes['filter']['match_expressions']" :key="id">
                <td>{{match_expressions['attribute_name']}}</td>
                <td>{{match_expressions['operator']}}</td>
                <td>{{match_expressions['values']}}</td>
            </tr>
        </template>
        <template v-else>
            <tr>
                <td class="data-not-available" colspan="3">No Data</td>
            </tr>
        </template>
    </tbody>
</table>

Я выполняю циклы подтипов ['filter'] ['match_expressions'], которые будут такими, 

[{ "attribute_name": "xyz", "operator": "In", "values": [ "SF100" ] }]

Но иногда подтипы ['filter'] ['match_expressions'] будут иметь следующий формат: 

{ "attribute_name": "xyz", "operator": "In", "values": [ "SF100" ] }

Если это входит в объект, v-for в шаблоне не работает , отображается как, 

function values () { [nativeCode]}

Не знаю, как этого избежать. Любая помощь будет высоко ценится, поскольку я новичок в VueJS.

1 Ответ

1 голос
/ 09 апреля 2020

Вы можете попробовать обновить шаблон следующим образом: 

<template v-if="subtypes['filter']['match_expressions'] && Array.isArray(subtypes['filter']['match_expressions']">
  <tr v-for="(match_expressions,id) in subtypes['filter']['match_expressions']" :key="id">
    <td>{{match_expressions['attribute_name']}}</td>
    <td>{{match_expressions['operator']}}</td>
    <td>{{match_expressions['values']}}</td>
  </tr>
</template>
<template v-else-if="subtypes['filter']['match_expressions'] && (typeof subtypes['filter']['match_expressions'] === 'object')">
  <tr>
    <td>{{subtypes['filter']['match_expressions']['attribute_name']}}</td>
    <td>{{subtypes['filter']['match_expressions']['operator']}}</td>
    <td>{{subtypes['filter']['match_expressions']['values']}}</td>
  </tr>
</template>
<template v-else>
  <tr>
    <td class="data-not-available" colspan="3">No Data</td>
    </tr>
</template>

Здесь, 

subtypes['filter']['match_expressions']

мы просто проверяем, является ли указанное выше выражение массивом, используя Array.isArray() , Да, тогда мы используем v-for l oop. Если это объект, то нам не нужно l oop, мы можем просто отобразить свойства одного объекта.

...