I am implementing vuetify to display the list items in the following structure:
Interests
btn1 btn2
btn3 btn4
Not Interests
btn1 btn2
btn3 btn4
However, the titles "Interests" and "Not Interests" are not showing up correctly.
<v-layout row wrap>
<v-flex xs12 v-for="kid in kids">
<v-card color="blue-grey darken-2" class="white--text">
<v-card-title primary-title>
<div>
<div class="headline">{{kid.name}}</div>
<span class="grey--text">{{kid.school.name}}</span>
</div>
<!--<div>Listen to your favorite artists and albums whenever and wherever, online and offline.</div>-->
</v-card-title>
<v-card-actions>
<v-list>
<v-list-tile @click="">
<v-list-tile-content>
<v-list-tile-title>Interests</v-list-tile-title>
<div>
<v-btn flat dark v-for="(interest, idx) in kid.interests" :key="idx">{{interest}}</v-btn>
</div>
</v-list-tile-content>
</v-list-tile>
<v-divider></v-divider>
<v-list-tile @click="">
<v-list-tile-content>
<v-list-tile-title>Not Interests</v-list-tile-title>
<div>
<v-btn flat dark v-for="(nointerest,idx) in kid.notinterests" :key="idx">{{nointerest}}</v-btn>
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
I attempted to set a fixed height for the list items, but the alignment is still incorrect.