Vue.js/Nuxt如何获取当前locale实现数组对象多语言翻译后随机选取

你当前代码核心问题是tiprandom计算属性仅返回了随机选中的条目对象，没有调用你预先定义的多语言翻译方法，按以下方案修改即可实现需求：

最简修改方案 #

直接修改模板中的渲染逻辑，调用你已经写好的functionDicas方法传入随机选中的条目即可：

<template lang="html">
  <div class="loading-page" v-if="loading">
    <h1 class="title">Estamos preparando o terreno para você</h1>
    <img src="~/assets/media/photos/agronomy.png" />
    <!-- 仅修改这一行，传入随机条目到翻译方法 -->
    <p class="text">{{ functionDicas(tiprandom) }}</p>
  </div>
</template>

这个方案不需要修改其他逻辑，即可实现随机选取条目后自动匹配当前locale返回对应语言文本，切换语言时也会自动更新翻译内容。

计算属性封装方案（更推荐） #

如果你希望后续调用更简洁，可以直接在tiprandom计算属性中完成翻译逻辑，模板无需修改：

computed: {
  tiprandom () {
    // 先随机选取条目
    const randomItem = this.dicas[Math.floor(Math.random()*this.dicas.length)]
    // 调用翻译方法返回对应语言文本
    return this.functionDicas(randomItem)
  },
  locale() {
    if (this.$i18n.locale == 'pt-br') {
      return 'pt_br'
    } else {
      return this.$i18n.locale
    }
  }
},

代码优化建议 #

你可以将翻译方法的判断逻辑简化为映射表，后续新增语言时不需要额外加if分支，适配后续对接API的扩展需求：

methods: {
  functionDicas(dica) {
    // 定义locale和字段的映射关系
    const localeFieldMap = {
      'pt_br': 'nome',
      'en': 'nome_en',
      'es': 'nome_es'
    }
    // 按当前locale取对应字段，找不到就默认返回葡萄牙语
    return dica[localeFieldMap[this.locale]] || dica.nome
  },
  // 其他原有方法保留
  start () {
    this.loading = true
  },
  finish () {
    this.loading = false
  }
}

以上逻辑完全适配你后续对接API拉取多语言数据的需求，后续只要将dicas数组替换为接口返回的多语言数组即可，不需要修改其他翻译逻辑。

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