Add click event to Vue prop? Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Add click event to Vue prop? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have a vue component that has numerous props and have come across a slight issue. This CTA component button can have a footnote as a prop which can also contain a link, as this one does. Is it possible to add a click event (google analytics tracker) to this link even though it is a string?

        <CTA
          title="Sign up for Savings"
          sub-title="Learn about the different ways<br> to save.<sup>&dagger;</sup>"
          :has-button="true"
          button-text="Sign up"
          button-href="/savings-and-support/savings"
          :has-footnote="true"
          footnote="<sup>&dagger;</sup>Restrictions apply. See <a @click='WHERE I WANT GA CLICK EVENT' href='/savings-and-support/savings#terms' style='text-decoration:underline'>eligibility requirements</a> for more information."
          @click="$ga.event('navigation', 'click', 'barker')">
        </CTA>

component:

<template>
  <div class="cta-column" :class="{ 'cta-column--one-item': oneColumn }">
    <div class="icon">
      <slot name="icon"></slot>
    </div>

    <div class="cta callout-row__cta-title">
      <h2 v-html="title"></h2>
    </div>

    <div class="cta-sub-title">
      <p v-html="subTitle"></p>
    </div>

    <template v-if="hasButton">
      <router-link v-if="useRouterLink" :to="buttonHref" class="cta__button button" v-html="buttonText"> </router-link>

      <a v-else :href="buttonHref" class="cta__button button" v-html="buttonText"> </a>
    </template>

    <div class="cta-footnote" v-if="hasFootnote">
      <p class="footnote" v-html="footnote"></p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CTA',
  props: {
    title: {
      type: String,
      required: true
    },
    subTitle: {
      type: String,
      required: false
    },
    hasButton: {
      type: Boolean,
      required: false
    },
    buttonText: {
      type: String,
      required: true
    },
    footnote: {
      type: String,
      required: false
    },
    hasFootnote: false,
    oneColumn: false,
    buttonHref: {
      type: String,
      required: true
    },
    useAnchor: {
      type: Boolean,
      default: false
    }
  },
}
</script>

Answer

You could forward the click event from CTA by binding a click-handler to the footer’s p that re-emits the event (with $emit()):

<p class="footnote" @click="$emit('click', $event)" v-html="footnote"></p>

That would allow you to bind click-handlers on select CTA that require analytics (i.e., <CTA @click="$ga(...)">).

demo

We are here to answer your question about Add click event to Vue prop? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji