带有 Nuxt.js i18n 的动态 CTA url答案

【问题标题】：Dynamic CTA url with Nuxt.js i18n带有 Nuxt.js i18n 的动态 CTA url
【发布时间】：2020-09-24 01:51:35
【问题描述】：

需要一些帮助来根据所选语言生成动态 CTA。

总而言之...我确实有一个基于 Nuxt.js 构建的网站，支持 3 种语言 (i18n)。在服务部分，我确实有 3 项服务，每一项都拥有 CTA。

所有文本（H2、段落和 CTA 文本）都根据语言选择器进行更改。但我也想做 CTA 链接以根据语言进行更改。

这是一个服务块的代码：

<b-card class="service--item mb-3">
   <b-card-text>
      <h2 class="h3 mb-4">{{$t('homepage.services.service_1_header')}}</h2>
      <div>
        <p class="mb-5 medium">
          <span>{{$t('homepage.services.service_1_description')}}</span>
        </p>
      </div>
        <a class="btn btn-orange rounded-pill" href="example.com" data-ga-slug="Get a Quote" 
            role="button" tabindex="0">
          <span>
                {{$t('homepage.services.get_a_quote')}}
          </span>
        </a>
  </b-card-text>
</b-card>

与EN语言相关的代码如下。为了便于阅读，我只是删除了字符串。

"services": {
            "header": "",
            "sub_header": "",
            "service_1_header": "",
            "service_1_description": "",
            "service_1_landing_page": "site1",
            "service_2_header":  "",
            "service_2_description":  "",
            "service_2_landing_page": "site2",
            "service_3_header":  "",
            "service_3_description":  "",
            "service_3_landing_page":  "",
            "get_a_quote":  "",

所以我的疑问是...... id 喜欢按钮内的这个 "href="example.com"" 是动态的。类似 href="{{$t('homepage.services.service1_landing_page')}}"

不幸的是，上面提到的这种方法不起作用，你可以看到error here

感谢你们的帮助！

【问题讨论】：

标签： internationalization nuxt.js vue-i18n nuxt-i18n

【解决方案1】：

如果您希望 href 或任何其他标准 html 属性是动态的（例如 style、name、id），则必须将其用作 :[name-of-attribute]。根据您的问题：

<a :href="$t('homepage.services.service1_landing_page')" data-ga-slug="Get a Quote" role="button">
    <span>
        {{$t('homepage.services.get_a_quote')}}
    </span>
</a>

【讨论】：