vue.js - Nuxt JS i18n/多语言与 headless CMS

Question

刚开始玩 Nuxt(和一般的 Vue)所以如果我忽略了这里明显的东西，请原谅我。

我正在尝试使用 DatoCMS 作为我的内容源来建立一个多语言网站。

我已经设置了 nuxt-i18n 插件，翻译了路由，一切正常。现在在一个页面中，我需要根据当前语言环境切换内容，我只找到了内容存储在本地 json 文件等中的示例。

我找到了一个不应该的解决方法:

<template>
  <div>
    <div v-if="this.$metaInfo.htmlAttrs.lang === 'de-DE'">{{homepage.germanTitle}}</div>
    <div v-else>{{homepage.englishTitle}}</div>
  </div>
</template>

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    homepage: gql`
      {
        homepage {
          id
          title
          englishTitle: title(locale: en)
          germanTitle: title(locale: de)
        }
      }
    `
  }
}
</script>

任何指点将不胜感激! :)

Answer 1

我认为这是正确的做法:

<div>
<template v-if="$i18n.locale === 'en">{{homepage.englishTitle}}</tempate>
<template v-else>{{homepage.germanTitle}}</tempate>
</div>

你不应该在模板中使用 this，检查 i18n API 以查看你可以从哪里获取你的条件数据(在这种情况下我使用 $i18n.locale)，使用模板而不是 div (或三元运算符，以避免在某些情况下出现标记问题)。

但是，如果可以使用 graphql，我最好执行以下操作:

homepage {
     id
     title: {
       en: title(locale: en)
       de: title(locale: de)
     }
}

模板:

<div>{{ homepage.title[$i18n.locale] }}</div>