new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
isHide: true,
/*icons: {
mdiBellOutline,
mdiBellCheckOutline,
},*/
students: [
{ no: '1', name: 'Ridho Mckinnon', status: 1, time: ' 08:04 - 09:58, 19/01/2021', isCorrect: 1, isRemind: 1,},
{ no: '2', name: 'Ridho Mckinnon', status: 1, time: ' 08:04 - 09:58, 19/01/2021', isCorrect: 0, isRemind: 1,},
{ no: '3', name: 'Ridho Mckinnon', status: 0, time: ' 08:04 - 09:58, 19/01/2021', isCorrect: 0, isRemind: 1,},
{ no: '4', name: 'Ridho Mckinnon', status: 0, time: ' 08:04 - 09:58, 19/01/2021', isCorrect: 0, isRemind: 0,},
],
// 👇 new data property with mappings
options: [
{type: [1,1,1], color: 'v-btn--outlined theme--light primary--text', txt: 'Corrected', icon: 'd-none'},
{type: [1,0,1], color: 'primary plain--text', txt: 'Correction', icon: 'd-none'},
{type: [0,0,1], color: 'v-btn v-btn--text theme--light success--text shadow-none', txt: 'Reminded', icon: ''},
{type: [0,0,0], color: 'v-btn v-btn--text theme--light primary--text shadow-none', txt: 'Remind', icon: ''}
]
}
},
computed: {
// 👇 computed property for adjusting your array
getStudents() {
const result = []
this.students.forEach(s => {
this.options.forEach(o => {
if ([s.status, s.isCorrect, s.isRemind] == ''+o.type) {
s.color = o.color
s.txt = o.txt
s.icon = o.icon
result.push(s)
}
})
})
return result
}
},
methods: {
getColorChip(status) {
return status === 1 ? 'v-chip-light-bg success--text' : 'v-chip-light-bg error--text'
},
}
})
<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb9b0b1ab9fe9f1a7">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="205655455449465960120e58">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<v-container>
<!-- 👇 loop with computed property -->
<v-row v-for="student in getStudents" :key="student.no">
<v-col xl="2" lg="2" md="2" sm="6" cols="12">
<v-chip
class="text-subtitle-2 text-md-caption text-lg-caption text-xl-caption"
:color="getColorChip(student.status)"
>
{{ `${student.status ? 'Active': 'Nonactive'} ` }}
</v-chip>
</v-col>
<v-col xl="3" lg="3" md="3" sm="6" cols="12">
<div class="d-flex align-center">
<div>
<v-img src="../../../../assets/icons/calendar.svg" width="20"></v-img>
</div>
<span class="pl-2 text-subtitle-2">{{ student.time }}</span>
</div>
</v-col>
<v-col xl="3" lg="3" md="3" sm="12" cols="12">
<v-btn width="100%" :color="student.color">
<v-icon v-show="isHide" class="mr-2" :class="student.icon">
{{ student.icon }}
</v-icon>
{{ student.txt }}
</v-btn>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4432312104766a3c">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9dfdcccddc0cfd0e99b87d1">[email protected]</a>/dist/vuetify.js"></script>