vuejs default properties initialized with vue-i18n

Question

vuejs default properties initialized with vue-i18n

I am trying to establish a default property from a dictionary in this way:

  props: {
    title: {
      type: String,
      default: this.$t("basic.confirm"),
    },
    description: {
      type: String,
    }
  }, ...

The $t function is part of the vue-i18n library, and my goal is to set the title using a value from the dictionary if it is not defined in the parent class. However, I encountered an error:

Uncaught TypeError: this.$t is not a function

A similar error occurs when I remove 'this' while reloading.

Uncaught ReferenceError: $t is not defined

Interestingly, logging out this value in the mount method works without any issues.

Is there a solution for setting a default property from the dictionary?

Thank you in advance!

javascript vue.js vue-i18n

Answer 1

Answer №1

A helpful approach is to include the key or a portion of it as default props in your Vue component:

title: {
   type: String,
   default: "basic.confirm", //or "confirm"
 },

In your template, you can then use this prop like so:

<h1>{{ $t(title) }}</h1> //or $t("basic." + title)

Additionally, you are able to access the translation function $t within a function like this:

title: {
  type: String,
  default: function () {
    return this.$t("basic.confirm")
  }
},

Answer 2

A helpful approach is to include the key or a portion of it as default props in your Vue component:

title: {
   type: String,
   default: "basic.confirm", //or "confirm"
 },

In your template, you can then use this prop like so:

<h1>{{ $t(title) }}</h1> //or $t("basic." + title)

Additionally, you are able to access the translation function $t within a function like this:

title: {
  type: String,
  default: function () {
    return this.$t("basic.confirm")
  }
},

Answer 3

Answer №2

To address this issue, a possible solution is to set the key or a portion of it as default properties like so:

 title: {
   type: String,
   default: "", 
 },

Then, in the template section:

    <h1>{{ $t(titlep) }}</h1>

And within the script area:

    import { useI18n } from 'vue-i18n'
    ...
    setup(props) {
      const { t }  = useI18n()
      const titlep = computed(() =>
        props.title ? props.title : t('basic.confirm')
      )
      return { titlep }
    }

Answer 4

To address this issue, a possible solution is to set the key or a portion of it as default properties like so:

 title: {
   type: String,
   default: "", 
 },

Then, in the template section:

    <h1>{{ $t(titlep) }}</h1>

And within the script area:

    import { useI18n } from 'vue-i18n'
    ...
    setup(props) {
      const { t }  = useI18n()
      const titlep = computed(() =>
        props.title ? props.title : t('basic.confirm')
      )
      return { titlep }
    }

vuejs default properties initialized with vue-i18n

Answer №1

Answer №2

Similar questions

"Utilizing a function from an external file within the Main App function - a step-by-step guide

Confused about the concept of an SWR subscription

Troubleshooting a JavaScript error while attempting to execute a function from a

Putting VueJS, typescript, and jest to the test: examining the contents of a dropdown list web-component

Is there a way to change a mandatory field to optional in SuiteCRM?

Implement a recursive approach to dynamically generate React components on-the-fly based on a JSON input

Navigate through set of Mongoose information

Neither the context nor props contain the element 'store' that you are searching for

``In JavaScript, the ternary conditional operator is a useful

The function you are trying to use is not a valid jQuery function

Ways to ensure that a URL is distinct once a link has been clicked

Establish a buffering system for the <video> element

Exploring Angular2: A Guide to Interpolating Expressions in Templates

Instructions on filling the star icon with color upon clicking the button

What could be the reason for the jQuery animate function not functioning properly?

Is there a way in JavaScript to launch a link in a new tab and overlay a div on top of the existing content of the page?

Utilizing Visual Studio: Implementing jsmin in post-build actions

Transforming Jquery into vanilla JavaScript and sending a POST request

Using React hooks to transfer an item from one array to another and remove it

"Displaying the y-axis in d3.js: A Step-by-Step