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

Question

I have an object as follows.Inside that object is a key with the value being of type array. How can I display it to the user as a list?

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']},
],

Here is what I am using to display the name to the user:

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

However all it shows is an array. How can I get it to display a list like

• Inconsistent inputs
• Formula container

For the standard field component (as an example - should apply for all items in array).

Answer 1

You can access the uses inside each component just as component.uses. You could run a v-for and display it out.

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