如何通过i18n实现v-autocomplete无数据默认提示的多语言翻译

以下两种实现方式可按需选择：

方案1：单组件局部适配（仅修改当前使用的组件） #

通过v-autocomplete内置的no-data插槽自定义提示内容，直接调用项目现有i18n翻译能力即可，修改后的代码如下：

<v-autocomplete
  class="form-select__region"
  :class="fieldName"
  dense
  :disabled="disabled"
  item-text="text"
  item-value="value"
  :items="getData"
  outlined
  single-line
  solo
  :value="value"
  @change="input(fieldName, $event)"
>
  <!-- 新增无数据提示插槽，对应你的i18n翻译key即可 -->
  <template #no-data>
    {{ $t('common.noMatchData') }}
  </template>
</v-autocomplete>

你只需提前在各语言的i18n配置文件中，新增对应key的翻译内容即可，比如中文配置对应值为「暂无匹配数据」，英文配置对应值为「No data found」。

方案2：全局统一适配（全项目所有下拉类组件生效，无需逐个修改） #

如果希望项目内所有v-autocomplete、v-select等带下拉列表的组件，无数据提示都自动适配当前语言，直接修改Vuetify初始化配置即可：

1. 找到项目的Vuetify初始化文件（通常为src/plugins/vuetify.js或入口文件main.js），修改配置如下：

import { createVuetify } from 'vuetify'
// 引入你项目已配置好的i18n实例
import i18n from '@/i18n'

const vuetify = createVuetify({
  // 关联Vuetify内置文本与你的i18n能力
  locale: {
    t: (key, ...params) => i18n.global.t(key, params),
  },
  // 全局配置组件默认属性
  defaults: {
    VAutocomplete: {
      noDataText: 'common.noMatchData' // 填你i18n中对应的翻译key
    },
    // 可同步配置v-select等同类组件
    VSelect: {
      noDataText: 'common.noMatchData'
    }
  }
})

配置完成后，项目内所有未单独设置插槽的v-autocomplete都会自动调用i18n翻译作为无数据提示。

内容的提问来源于stack exchange，提问作者ksusha-beep