Vue-i18 n和v-select -无法翻译

jdzmm42g  于 2023-06-24  发布在  Vue.js
关注(0)|答案(3)|浏览(168)

我在v-select中用vue i18 n翻译信息时遇到了问题。所有其他的翻译工作,但不是这一个...我找不到解决办法。。
HTML:

<v-card-text>
    <v-select v-model="model" :items="propsList" :items-text="propsList.text" label="Select a reason:" clearable />
</v-card-text>

数据例如:($t = i18 n)

propsList: [
    { text: this.$t('XXX.A') as string, value: 'X' },
    { text: this.$t('XXX.B') as string, value: 'Y' },
    { text: this.$t('XXX.C') as string, value: 'Z' },
],

翻译:

{ "en": {
    "XXX" : {
        "A": "A", ...}},
  "fr": {
    "XXX" : {
        "A": "A", ...}},

在我的App.vue中:

data ... : 

languages: [
    { text: 'English', value: 'en' },
    { text: 'Français', value: 'fr' },
],

watch: {
    language(val: string) {
        this.setLanguage(val);
        this.$i18n.locale = val;
    },
},

我一直在努力!谢谢提前:)

y0u0uwnf

y0u0uwnf1#

有一个名为:get-option-label的prop对i18 n很有用,这样你就可以在option数组中传递i18 n键:

<v-select :options="options" :get-option-label="option => $t(option.text)"></v-select>

然后选项看起来像这样:

options = [
  { text: "XXX.A", value: 0 }
  { text: "XXX.B", value: 1 }
  { text: "XXX.C", value: 3 }
]

更多详情:https://vue-select.org/api/props.html#getoptionlabel

6tdlim6h

6tdlim6h2#

v-select没有名为'items-text'的prop(带s的项)。你可能指的是item-text(不带s)。
prop item-text用于指定数据的每个项目具有文本的“路径”,它默认为字符串“text”,这意味着该项目的文本在属性“text”处找到
例如,如果您拥有结构为:

{
  value: 'some value',
  name: 'John'
}

你应该传递字符串“name”。
因为你有你的数据与文本作为text属性,你的模板应该看起来像这样:

<v-card-text>
    <v-select v-model="model" :items="propsList" label="Select a reason:" clearable />
</v-card-text>

此 prop 的其他选项包括:

*字符串数组

对于嵌套的属性使用此方法,例如您的项目结构如下所示:

{
 value: 'whatever',
 data: {
   name: {
     en: 'John'
   }
 }
}

你应该传递['data', 'name', 'en'],Vuetify会解析这个名字。

*回调函数

你传递的回调函数将被每个项目调用,项目本身将作为参数传递,你应该返回你想要显示的任何字符串,如果你想连接项目的两个属性,这可能很有用,例如。名字和姓氏。或显示基于某个值的前缀

pcrecxhr

pcrecxhr3#

也许有点晚了,但这可能会帮助一些人谁撞上了这个问题最近。TLDR应答:您可以使用插槽来自定义几乎所有与v-select和许多其他如v-data-table。在我们的例子中是item插槽。每个组件的插槽都列在API中,但是有很多已经存在,但没有记录,所以你可以在他们的论坛/github上寻找社区输入。
详细解答:

<v-select
  :items="cities"
  v-model="city"
  item-text="name"
  item-value="id"
>
<template v-slot:item="{ active, item, attrs, on }">
  <v-list-item v-on="on" v-bind="attrs" #default="{ active }">
    <v-list-item-content>
      <v-list-item-title>
        <v-row no-gutters align="center" class="ml-3">
          <span>{{ $t(item.name) }}</span>
        </v-row>
      </v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</template>
<template v-slot:selection="{ active, item, attrs, on }">
  <div v-on="on" v-bind="attrs">
    {{ $t(item.name) }}

  </div>
</template>
</v-select>

那么,这段代码是如何解决这个问题的呢?
1)item-text和item-value ->我们获取一个有属性name和id的对象,我们使用ID作为返回值,并在下拉列表中使用name作为显示文本
2)在v-select标记中,我们定义了自定义行为,我们接受“active”作为菜单的状态,“item”--我们需要传递给i18 n翻译器或任何其他逻辑块的内容,“on”是事件触发器,“attrs”--属性是v-select对象的 prop (这里发生了黑魔法)
3)我们按照我们想要的列表项来设置样式,在我的例子中,名称被传递给驻留在全局应用程序范围内的转换器函数。
4)我们操纵选择槽以不仅翻译下拉菜单项而且翻译所选值。在这种情况下,由于我们不需要“active” prop ,我们可以使用普通div并添加任何我们想要的标记。在这种情况下,我们不需要一个v-list项目,因为它添加了侧边距,但您可以根据自己的意愿进行自定义。
您可以添加图标,注入组件和更多的东西。相当强大。

相关问题