将组合值传递给v-model

Question

我正在将Quasar v.2与VueJs 3一起使用。我正在使用q-select组件来动态切换语言。这是我的代码：

<template>
<q-select v-model="$i18n.locale" :options="langs">
</q-select>
</template>

<script lang="ts">
export default defineComponent({
name: 'LanguageSwitch',
setup() {
const langs = ['en', 'jp']
return {langs}
}

</script>

我现在想做的是继续显示"；en"；以及"；jp"；，并在我将它们传递给i18n.locale 的那一刻将它们与另一个单词连接起来(例如形成"en-US"(

Answer 1

您可以更新langs以包含所需的值和标签：

export default defineComponent({
setup() {
const langs = [
{ value: 'en-US', label: 'en' },
{ value: 'jp-JP', label: 'jp' },
]
return { langs }
}
}

然后将<q-select>.optionValue设置为"value"，使其使用项目的value属性作为选项值，将<q-select>.optionLabel设置为"label"，使其将项目的label属性用作标签：

<q-select v-model="$i18n.locale" :options="langs"
option-value="value"
option-label="label">
</q-select>