can Any one help me... I want to show card-title only in card-1. I don't want to show the card-title in card-2 card-3 and card-4.
<v-app>
<v-row v-for="(item, index) in list" :key="index">
<v-col cols="12">
<v-card>
<v-card-title>
<v-avatar size="60" color='primary'>{{item.avatarText}}</v-avatar>
</v-card-title>
<v-card-text>{{item.name}}</v-card-text>
</v-card>
</v-col>
</v-row>
</v-app>
</template>
<script>
export default{
data(){
return{
list:[{name:'apple1',avatarText:'Abc',},
{name:'apple2'},
{name:'apple3'},
{name:'apple4'}]
}
}
Using v-if, you can check for the index:
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: () => ({
list:[ {name:'apple1', avatarText:'Abc'}, {name:'apple2'}, {name:'apple3'}, {name:'apple4'} ]
})
});<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<v-app id="app">
<v-row v-for="(item, index) in list" :key="index">
<v-col cols="12">
<v-card>
<v-card-title v-if="index === 0">
<v-avatar size="60" color='primary'>{{item.avatarText}}</v-avatar>
</v-card-title>
<v-card-text>{{item.name}}</v-card-text>
</v-card>
</v-col>
</v-row>
</v-app>