0

需要一些帮助来根据所选语言生成动态 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":  "",

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

不幸的是，上面提到的这种方法不起作用，因为您可以在此处看到错误

将感谢你们的帮助！

4

1 回答 1

0

如果您希望您的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>
于 2020-06-23T07:42:52.703 回答