Vue项目中select下拉选项绑定国际化语言

1.当切换语言的时候，想要响应式地更新下拉选项，关键点是用$t(item.label)取得语言。注意item.label左右是不带引号的，否则会当作原字符串输出。

            <el-select v-model="value" class="xxx-action-select" :placeholder="$t('lang.general.actions')">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="$t(item.label)"
                :value="item.value"
              />
            </el-select>

 2.TypeScript ， 选项数组下标label以字符串形式存放语言下标。

import { defineComponent, toRefs, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';

export default defineComponent({
    name: 'xxx',
    setup() {
                const { t } = useI18n();
                const state = reactive({value:ref(''),options:[
                  {
                    value: 'value1',
                    label: 'lang.xxx.label1',
                  },
                  {
                    value: 'value2',
                    label: 'lang.xxx.label2',
                  },
                  {
                    value: 'value3',
                    label: 'lang.xxx.label3',
                  },
                ]});
        return {
            ...toRefs(state),
        };
    },
});