Vue-i18n环境下v-select选项文本无法随语言切换更新问题排查

你把infoItems的文本值写在data里，这部分代码只会在组件初始化时执行一次——也就是第一次加载页面时调用$t()获取当前语言的翻译文本。当切换语言时，data里的旧文本不会自动重新调用$t()更新，所以选项文本不会跟着变化。而label用的是:label="this.$t('xxx')"，每次组件渲染都会重新执行$t()，因此能实时更新。

有两种常用修复方式，任选其一即可：

方式1：将infoItems改为计算属性 #

计算属性会响应依赖变化自动重新计算，$i18n.locale就是它的依赖，切换语言时会自动生成带最新翻译的数组：

computed: {
  infoItems() {
    return [
      { text: this.$t('infoNumber1.name'), value: 'Number 1' },
      { text: this.$t('infoNumber2.name'), value: 'Number 2' },
      { text: this.$t('infoNumber3.name'), value: 'Number 3' },
      { text: this.$t('infoNumber4.name'), value: 'Number 4' }
    ]
  }
}

同时删除data里的infoItems定义，避免冲突。

方式2：监听语言变化，手动更新infoItems #

如果必须保留data里的定义，可以通过监听$i18n.locale的变化，重新赋值infoItems：

data() {
  return {
    infoItems: []
  }
},
mounted() {
  // 初始化时加载一次
  this.updateInfoItems()
},
watch: {
  '$i18n.locale'() {
    // 语言切换时重新更新数组
    this.updateInfoItems()
  }
},
methods: {
  updateInfoItems() {
    this.infoItems = [
      { text: this.$t('infoNumber1.name'), value: 'Number 1' },
      { text: this.$t('infoNumber2.name'), value: 'Number 2' },
      { text: this.$t('infoNumber3.name'), value: 'Number 3' },
      { text: this.$t('infoNumber4.name'), value: 'Number 4' }
    ]
  }
}

你的第二个v-select中v-model="infoItems"存在逻辑错误——v-model应该绑定一个单独的变量（比如selectedInfoItem），而非绑定选项数组本身，这会导致选中时直接修改选项数组，引发意料之外的bug，记得同步修改：

<v-select
    class="infoItemsSelection"
    v-model="selectedInfoItem" <!-- 改为单独的变量 -->
    :label="this.$t('indications.infoItemsSelection')"
    :items="infoItems"
    item-title="text"
    item-value="value"
></v-select>

并在data中添加selectedInfoItem: ''或对应初始值。

内容的提问来源于stack exchange，提问作者Ankay