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), }; }, });
标签:lang,选项,Vue,语言,xxx,绑定,value,label,select From: https://www.cnblogs.com/pingblog/p/16591033.html