vuefity 翻译 v-text-field 标签

Question

我需要翻译 vuetify 文本字段（ v-text-field ）的标签（和占位符）。 代码看起来像这样

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

在第一种情况下（也尝试使用自动完成），标签正好是（ $t('common.nameLabel')作为字符串）。 所以它似乎不能作为函数处理。 是否可以通过这种方式翻译所有标签？

Answer 1

您需要使用v-bind （或冒号速记）来传递JavaScript值，否则它将只传递字符串文字：

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

这是一个小JSFiddle： https ：//jsfiddle.net/9rjpaz4L/

Answer 2

你也可以不用 v-bind 这个词，只用冒号：

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