Question

刚开始和Nuxt（和Vue一起）玩耍，所以如果我在这里忽略了一些明显的事情，请原谅我。

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

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

我找到了一种解决方法，该解决方法无法达到预期的效果：

class str(object=b'', encoding='utf-8', errors='strict')

任何指针将不胜感激！：）

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>

Answer 2

我认为您应该以不同于GraphQL的方式获取数据。

我会做类似的事情：

query {
  homepage(locale: $locale) {
    id
    title
  }
}

但是随后您需要确定如何传递$locale变量。这取决于您的喜好。我会在这里检查：https://vue-apollo.netlify.com/guide/apollo/queries.html#simple-query您拥有的替代选项。