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).
CodePudding user response:
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>