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

Position the vertical bar directly adjacent to the form input field

What is the best way to display a 404 error page for a nonexistent child page on a WordPress site?

The integration of socket.io with static file routing in node.js is encountering issues

Maintain the newly selected background color for the current day in fullcalendar when navigating to the next or previous month

Retrieve the content of a text field with jQuery

How to dynamically add HTML content to a JSON string with the help of Javascript

Communication between Angular Controller and Nodejs Server for Data Exchange

When async is set to true in an Ajax call, the response may come

Issue with manipulating currency conversion data

Is there a way to exclusively use ES6 to import jQuery from an npm package?

Is the drag-and-drop feature not working properly?

Utilizing the scrollTop method to display the number of pixels scrolled on

Problem with deploying a Nextjs project on cPanel

Preventing the mysql server called by php from running when the website is refreshed

Issues within jQuery internal workings, implementing improved exception handling for fn.bind/fn.apply on draggable elements

tips for utilizing namespaced getter filtering within a Vuex module in vueJs

What is the best way to pass a value to a modal and access it within the modal's component in Angular 8?

Issue encountered when sending information to asmx web service via ajax and displaying the result on an HTML page with a javascript function

From AJAX response to React state attribute, store the JSON data

Set a Vue.js variable when the input value changes