将组合值传递给 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.locale

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>

将组合值传递给 v-model

Passing to v-model a composed value

vue.js

vuejs3

quasar-framework

vue-composition-api