I am just looking for some advice on if there is a more efficient way to write the below, make it a little more DRY?
<h2>{{ title }}</h2>
<p>{{ subtitle }}</p>
As I am making the same check for this.name on both title and subtitle I thought there could be a between way than my current implementation, any ideas?
computed: {
title() {
if (this.name === 'discounts_offers') {
return this.$t('discounts.title')
}
if (this.name === 'newsletter') {
return this.$t('newsletters.title')
}
if (this.name === 'product_upgrade') {
return this.$t('upgrade.title')
}
return this.name
},
subtitle() {
if (this.name === 'discounts_offers') {
return this.$t('discounts.subtitle')
}
if (this.name === 'newsletter') {
return this.$t('newsletters.subtitle')
}
if (this.name === 'product_upgrade') {
return this.$t('upgrade.subtitle')
}
return this.name
},
}
My suggestion :
Literal keys should be same as the value of this.name. So that you can translate them dynamically.
Hence, Instead of multiple if/else clause. You can directly achieve that with a single line of code.
title() {
return this.$t(this.name)
}
How about something like this?
data() {
return {
map: {
discounts_offers: "discounts",
newsletter: "newsletters",
product_upgrade: "upgrade"
}
}
},
computed: {
title() {
return this.map[this.name] ? this.$t(`${this.map[this.name]}.title`) : this.name
},
subtitle() {
return this.map[this.name] ? this.$t(`${this.map[this.name]}.subtitle`) : this.name
},
}