我在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;
},
},
我一直在努力!谢谢提前:)
3条答案
按热度按时间y0u0uwnf1#
有一个名为:get-option-label的prop对i18 n很有用,这样你就可以在option数组中传递i18 n键:
然后选项看起来像这样:
更多详情:https://vue-select.org/api/props.html#getoptionlabel
6tdlim6h2#
v-select
没有名为'items-text'的prop(带s的项)。你可能指的是item-text
(不带s)。prop
item-text
用于指定数据的每个项目具有文本的“路径”,它默认为字符串“text”,这意味着该项目的文本在属性“text”处找到例如,如果您拥有结构为:
你应该传递字符串“name”。
因为你有你的数据与文本作为
text
属性,你的模板应该看起来像这样:此 prop 的其他选项包括:
*字符串数组
对于嵌套的属性使用此方法,例如您的项目结构如下所示:
你应该传递
['data', 'name', 'en']
,Vuetify会解析这个名字。*回调函数
你传递的回调函数将被每个项目调用,项目本身将作为参数传递,你应该返回你想要显示的任何字符串,如果你想连接项目的两个属性,这可能很有用,例如。名字和姓氏。或显示基于某个值的前缀
pcrecxhr3#
也许有点晚了,但这可能会帮助一些人谁撞上了这个问题最近。TLDR应答:您可以使用插槽来自定义几乎所有与v-select和许多其他如v-data-table。在我们的例子中是
item
插槽。每个组件的插槽都列在API中,但是有很多已经存在,但没有记录,所以你可以在他们的论坛/github上寻找社区输入。详细解答:
那么,这段代码是如何解决这个问题的呢?
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项目,因为它添加了侧边距,但您可以根据自己的意愿进行自定义。
您可以添加图标,注入组件和更多的东西。相当强大。