Solo estoy buscando algunos consejos sobre si hay una forma más eficiente de escribir lo siguiente, ¿hacerlo un poco más SECO?
<h2>{{ title }}</h2> <p>{{ subtitle }}</p>Como estoy haciendo la misma verificación para this.name tanto en el título como en el subtítulo, pensé que podría haber una forma intermedia que mi implementación actual, ¿alguna idea?
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 }, }Mi sugerencia :
Las claves literales deben ser iguales al valor de this.name . Para que puedas traducirlos dinámicamente.
Por lo tanto, en lugar de múltiples cláusulas if/else. Puede lograrlo directamente con una sola línea de código.
title() { return this.$t(this.name) }¿Qué tal algo como esto?
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 }, }