Vue中I18n结合v-for实现多语言内容自动切换问题求助

1. 绑定当前语言状态到Vue实例 #

在你的Vue组件的data中添加当前语言变量，直接从已引入的I18n实例获取初始语言：

data() {
  return {
    currentLocale: i18n.locale, // 对应en/ja/cn
    // 其他原有数据...
  }
}

2. 修改v-for的动态数据源 #

把模板中硬编码的data.en替换为动态的data[currentLocale]，让列表自动跟随当前语言切换：

<div class="artist_grid_list_container">
      <ul class="artist_grid_list" v-show="profile_flag">
            <li class="artist_grid_list_item" v-for="item in data[currentLocale]" :key="item.id">
                <span class="artist_grid_list_item_box">
                  <img
                    @click="modal_on('naritaaiko')"
                    :src="item.img"
                    data-micromodal-trigger="modal-1"
                    class="modal_open"
                  />
                </span>
                <p class="member_name">{{item.artist_name}}</p>
            </li>
      </ul>
</div>

3. 联动语言切换事件 #

给网页的语言切换按钮绑定方法，同步更新currentLocale和I18n实例的语言：

methods: {
  switchLanguage(lang) {
    // 更新组件内的语言状态
    this.currentLocale = lang;
    // 同步I18n实例的语言设置
    i18n.locale = lang;
    // 若I18n需要重新加载对应语言包，可在此补充逻辑
  }
}

关键注意事项 #

• 确保JSON文件中en/ja/cn三个分支的数组结构完全一致（每个艺人对象的id/img/artist_name等键必须存在），避免切换语言时出现渲染报错。
• 无需修改原有JSON结构（带语言后缀的方案反而会增加循环复杂度，当前按语言分分支的结构更适合直接切换数据源）。

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