将组合值传递给 v-model

Question

我正在使用带有 VueJs 3 的 Quasar v.2。 我正在使用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 的那一刻将它们与另一个单词（形成，例如“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>