vuefity translate v-text-field label

5
votes

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?

2
vue.jsvuejs2nuxt.jsvuetify.js

2 Answers

15
votes

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/

1
votes

You can also do it without the word v-bind, just with the colon:

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