vuetify 翻译 v-text-field 标签

Posted 2023-02-22

【中文标题】vuetify 翻译 v-text-field 标签

【英文标题】：vuefity translate v-text-field label

【发布时间】：2018-07-14 10:16:42

【问题描述】：

我需要翻译 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') 作为字符串）。所以它似乎不能作为一个函数处理。 可以这样翻译所有标签吗？

【参考方案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/

【参考方案2】：

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

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