Vue 2.0结合vue-i18n v8实现脚本中数组多语言翻译

原有写法的问题 #

1. 计算属性（computed）不能直接修改data中的数据，computed的核心是基于依赖返回计算后的值，直接修改原数据会破坏Vue的响应式逻辑
2. 数组访问语法错误：this.tripType.title[0] 写法错误，tripType是数组，要修改第一个元素的title，应该用this.tripType[0].title

方案一：用computed返回本地化后的数组（推荐） #

这种方式会自动响应语言切换，无需额外监听：

1. 修改data中的tripType，存储翻译key而非空title：

data: () => ({
  tripType: [
    { id: 1, key: 'OneWay' },
    { id: 2, key: 'Roundtrip' },
  ],
  selectedTripType: 1,
}),

2. 新增computed属性，生成带翻译title的数组：

computed: {
  localizedTripType() {
    return this.tripType.map(item => ({
      ...item,
      title: this.$t(item.key)
    }))
  }
}

3. 模板中使用computed后的数组：

<div
  class="form-check-inline"
  v-for="item in localizedTripType"
  :key="item.id"
>
  <label class="form-check-label">
    <input
      type="radio"
      class="form-check-input"
      :value="item.id"
      v-model="selectedTripType"
      @change="getTripType"
    />
    <span class="radio-title pl-2">{{ item.title }}</span>
  </label>
</div>

方案二：初始化+监听语言变化更新原数组 #

如果不想修改原有data结构，可通过钩子初始化+监听语言变化来更新title：

1. 保留原有data结构，新增初始化方法和监听器：

data: () => ({
  tripType: [
    { id: 1, title: "" },
    { id: 2, title: "" },
  ],
  selectedTripType: 1,
}),
created() {
  // 组件创建时初始化翻译
  this.updateTripTypeTitles()
},
watch: {
  // 监听vue-i18n的locale变化，切换语言时自动更新
  '$i18n.locale'() {
    this.updateTripTypeTitles()
  }
},
methods: {
  updateTripTypeTitles() {
    this.tripType[0].title = this.$t('OneWay')
    this.tripType[1].title = this.$t('Roundtrip')
  },
  getTripType() {
    // 你的业务逻辑
  }
}

2. 模板无需修改，继续使用原tripType数组即可

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