¿Alguien puede ayudarme? Quiero mostrar el título de la tarjeta solo en la tarjeta 1. No quiero mostrar el título de la tarjeta en tarjeta-2, tarjeta-3 y tarjeta-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'}] } }Usando v-if , puede verificar el 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>