0

need some help to generate dynamic CTAs according selected language.

To sum up... i do have a website built on Nuxt.js with 3 languages (i18n). In the service section i do have 3 services, each one with it owns CTA.

All the texts (H2, paragraphs and CTA text) are changing according to language picker. But i'd like to do the CTA link to change according language as well.

This is the code of one service block:

<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>

The code related to EN language is right below. To be easier to read, i just deleted the strings.

"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":  "",

So my doubt is... id like to this "href="example.com"" inside the button to be dinamic. Something like href="{{$t('homepage.services.service1_landing_page')}}"

Unfortunately this approached mentioned above did not worked as you can see the error here

Will appreciate you guys help!

Rodrigo Wiethorn
  • 1

1 Answers1

0

If you want your href or any other standard html attribute to be dynamic (e.g. style, name, id) you have to use it as :[name-of-attribute]. Based on your question:

<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>
FirePapaya
  • 509
  • 5
  • 21