Seeking advice on optimizing and simplifying this syntax in Vue's methods section:
methods: {
getColorBtn(status, isCorrect, isRemind, textButton) {
if (status === 1 && isCorrect === 1 && isRemind === 1) return 'v-btn--outlined theme--light primary--text'
if (status === 1 && isCorrect === 0 && isRemind === 1) return 'primary plain--text'
if (status === 0 && isCorrect === 0 && isRemind === 1) {
return 'v-btn v-btn--text theme--light success--text shadow-none'
}
if (status === 0 && isCorrect === 0 && isRemind === 0) {
return 'v-btn v-btn--text theme--light primary--text shadow-none'
}
return 'primary'
},
textButton(status, isCorrect, isRemind, textButton) {
if (status === 1 && isCorrect === 1 && isRemind === 1) return 'Corrected'
if (status === 1 && isCorrect === 0 && isRemind === 1) return 'Correction'
if (status === 0 && isCorrect === 0 && isRemind === 1) return 'Reminded'
if (status === 0 && isCorrect === 0 && isRemind === 0) return 'Remind'
return 'primary'
},
getIcon(status, isCorrect, isRemind, textButton) {
if (status === 1 && isCorrect === 1 && isRemind === 1) return 'd-none'
if (status === 1 && isCorrect === 0 && isRemind === 1) return 'd-none'
if (status === 0 && isCorrect === 0 && isRemind === 1) return mdiBellCheckOutline
if (status === 0 && isCorrect === 0 && isRemind === 0) return mdiBellOutline
return ''
},
getColorChip(status) {
if (status === 1) return 'v-chip-light-bg success--text'
return 'v-chip-light-bg error--text'
},
}
the outcome
The data() (Just displaying with one example here for structure reference):
data() {
return {
isHide: true,
icons: {
mdiBellOutline,
mdiBellCheckOutline,
},
students: [
{
no: '1',
thumbnail,
name: 'Ridho Mckinnon',
status: 1,
time: ' 08:04 - 09:58, 19/01/2021',
isCorrect: 1,
isRemind: 1,
},
}
}
The outcome: view image
The data() (Showing a dummy example with just one data entry):
data() {
return {
isHide: true,
icons: {
mdiBellOutline,
mdiBellCheckOutline,
},
students: [
{
no: '1',
thumbnail,
name: 'Ridho Mckinnon',
status: 1,
time: ' 08:04 - 09:58, 19/01/2021',
isCorrect: 1,
isRemind: 1,
},
}
}
New to JS and Vue, seeking guidance on improving coding practices. Thank you in advance.