如何在 VueJS 中显示表示 {} 内的键值对中的值的数组作为列表项？

Question

我有一个对象 follows.Inside 该对象是一个键，其值为数组类型。如何将其作为列表显示给用户？

allComponents: [
    {name: 'Standard field', uses: ['Inconsistent inputs', 'Formula container']},
    {name: 'Dropdown', uses: ['Single answer questions with finite responses', 'Used as a filter option in later tables in dashboards']},
    {name: 'Multiple choice', uses: ['Single answer questions with finite responses', 'Used as a filter option in later tables in dashboards']},
    {name: 'List', uses: ['Recording lists of data, such as costs, with known variables', 'Formulas can provide automated calculations of data']},
    {name: 'Date', uses: ['Recording dates', 'Provides time aggregations for tables & dashboards']},
],

这是我用来向用户显示名称的内容：

    <v-tabs vertical>
        <v-tab v-for="component in allComponents" :key="component.name">
            {{ component.name }}
        </v-tab>
        <v-tab-item v-for="component in allComponents" :key="component.name">
            <v-form>
                <!-- Name -->
                <label class="add-component-name">Name</label>
                <p>{{ component.name }}</p>
                <!-- Uses -->
                <label class="add-component-sub-heading">Uses</label>
                <div v-for="component in allComponents.filter(comp=>comp.uses)" :key="component.name"></div>
                <v-list class="background-colour-grey">
                    <v-list-item>
                        <v-list-item-content>
                            {{ component.uses }}
                        </v-list-item-content>
                    </v-list-item>
                </v-list>
            </v-form>
            <v-btn @click="showAddComponentDialog = false"/>
        </v-tab-item>
    </v-tabs>

然而它显示的只是一个数组。我怎样才能让它显示像

这样的列表

输入不一致
公式容器

对于标准字段组件（例如 - 应适用于数组中的所有项目）。

Answer 1

您可以像 component.uses 一样访问每个组件内部的 uses。你可以运行一个 v-for 并显示出来。

<v-tab-item v-for="component in allComponents" :key="component.name">
  <v-form>
    <!-- Name -->
    <label class="add-component-name">Name</label>
    <p>{{ component.name }}</p>
    <!-- Uses -->
    <label class="add-component-sub-heading">Uses</label>
    <div v-for="use in component.uses" :key="use"></div>
    <v-list class="background-colour-grey">
      <v-list-item>
        <v-list-item-content>
          {{ use }}
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-form>
  <v-btn @click="showAddComponentDialog = false" />
</v-tab-item>

如何在 VueJS 中显示表示 {} 内的键值对中的值的数组作为列表项？

How to display array that represents a value in a key value pair inside of {} as a list item in VueJS?

html

javascript

for-loop

vue.js

v-for