[英]Add click event to Vue prop?
I have a vue component that has numerous props and have come across a slight issue.我有一个 vue 组件,它有很多道具并且遇到了一个小问题。 This CTA component button can have a footnote as a prop which can also contain a link, as this one does.
这个 CTA 组件按钮可以有一个脚注作为道具,也可以包含一个链接,就像这个一样。 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>†</sup>"
:has-button="true"
button-text="Sign up"
button-href="/savings-and-support/savings"
:has-footnote="true"
footnote="<sup>†</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>
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()
):您可以通过将
click
处理程序绑定到重新发出事件的页脚p
来转发来自CTA
的click
事件(使用$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 (ie, <CTA @click="$ga(...)">
).这将允许您在需要分析的 select
CTA
上绑定click
处理程序(即<CTA @click="$ga(...)">
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.