Revamp the Vue component for better DRYness

Question

Revamp the Vue component for better DRYness

Seeking advice on a more efficient way to improve the code below and make it DRY:

<h2>{{ title }}</h2>
<p>{{ subtitle }}</p>

I am currently checking this.name for both the title and subtitle, wondering if there is a better implementation than what I have. Any suggestions?

computed: {
    title() {
        switch (this.name) {
            case 'discounts_offers':
                return this.$t('discounts.title');
            case 'newsletter':
                return this.$t('newsletters.title');
            case 'product_upgrade':
                return this.$t('upgrade.title');
            default:
                return this.name;
        }
    },
    subtitle() {
        switch (this.name) {
            case 'discounts_offers':
                return this.$t('discounts.subtitle');
            case 'newsletter':
                return this.$t('newsletters.subtitle');
            case 'product_upgrade':
                return this.$t('upgrade.subtitle');
            default:
                return this.name;
        }
    },
}

javascript vue.js

Answer 1

Answer №1

Here's what I propose:

The keys in the literal should match the value stored in this.name. This way, you can easily translate them on-the-fly.

Instead of using multiple if/else statements, you can achieve the same with just one line of code.

displayTitle() {
  return this.$t(this.name)
}

Answer 2

Here's what I propose:

The keys in the literal should match the value stored in this.name. This way, you can easily translate them on-the-fly.

Instead of using multiple if/else statements, you can achieve the same with just one line of code.

displayTitle() {
  return this.$t(this.name)
}

Answer 3

Answer №2

Could you try something along these lines?

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
    },
  }

Answer 4

Could you try something along these lines?

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
    },
  }

Revamp the Vue component for better DRYness

Answer №1

Answer №2

Similar questions

Transforming Arrays of Objects into a Single Object (Using ES6 Syntax)

A step-by-step guide to moving Vue .prototype to its own file

upright scrolling mouse slider

Is it possible to alter the link color in vuetify components without modifying the primary color?

Execute the command "prisma migrate dev" to update the existing database

Tracking changes in real time and calculating the sum with AJAX, PHP, and MySQL for efficient processing

Micro Frontend: Implementing a Pubsub System for Scalable Front-End Architecture

How come setting an optionsValue causes Knockout updating to malfunction?

Using both the variable and the JSON format from the Google Maps API

Sidenav Content with all elements having opacity applied

The React page is stuck in a perpetual cycle of reloading every single second

Tips for setting up a bookmark in bootstrapvue

Is there a way to handle templates in AngularJS that is reminiscent of Handlebars?

Express fails to pass password validation

Navigate post Ajax call

Canceling text as soon as the search input is entered in Vue.js

Error: The value property is undefined and cannot be read at the HTMLButtonElement

Explanation of TypeScript typings for JavaScript libraries API

Is there a way to bypass the final function call when using Express Middleware?

Variable in Javascript file causing return value to be 'undefined'