vuefity translate v-text-field label

Asked By: Anonymous

I need to translate the label (and placeholder) of vuetify text-field (v-text-field). The code looks like this

<template>(...)
<v-text-field
  label="$t('common.nameLabel')"
  v-model="registerName"
  required
     ></v-text-field>
<vuetify-google-autocomplete
  ref="registerAddress"
  id="map"
  dark
  label="registerAddressLabel"
  google-api-key="Xyz"
  v-on:placechanged="getAddressData"
  >
  </vuetify-google-autocomplete>
(...)</template>
<script>
   import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete'
   export default {
     data () {
       return {
         registerAddressLabel () {
           return this.$t('common.addressLabel')
         },
         registerAddress: '',
         registerEmail: '',
         registerPassword: '',
         registerName: ''
       }
    },
    methods: {
      getAddressData (addressData, placeholderResultData) {

      }
    },
    components: {
      VuetifyGoogleAutocomplete
    }
  }
</script>

in the first case (also tried with autocomplete) the label is exactly ($t('common.nameLabel') as a string). so it seems it doesn’t handle as a function.
Is it possible to translate all labels this way?


Solution

Answered By: Anonymous

You need to use v-bind (or the colon shorthand) to pass a JavaScript value, otherwise it will just pass the string literal:

<v-text-field
  v-bind:label="$t('common.nameLabel')"
  v-model="registerName"
  required></v-text-field>

Here’s a little JSFiddle: https://jsfiddle.net/9rjpaz4L/

techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno