Vue2 @click doesn't work with v-html in another component

Question

I have a sign up form and there is an Alert component to show the errors, one of the conditionals is "You already have an account click here to log in".

but the error messages are strings that are passed as props for the component "Alert" and the actions "click here" is a link.

<!-- Parent.vue -->
<Alert v-if="!!errorField" :message="errorList[errorField].message" />

here it is the message

// Parent.vue
errorList = {
   hasAuth: {
      message: `You already have an account <a @click.prevent="hasAuthClick()">click here</a> to log in`
   }
}

the Alert component is simple it just recieve the message as prop and render with v-html

<!-- Child.vue -->
<span v-html="message"></span>

By investigations, I just realize that the link is not being compiled by vue, and that's why I can't use the @click on it, but I don't know how to make vue to compile.

Answer 1

It will not work with v-html directive and you should use Vue Slots or Render Functions

I would rather use Slots for this.

Alert.vue

<template>
   <div>
     <slot>default slot</slot>
     <slot name="message">message slot</slot>
   </div>
</template>

and then

<alert>
   default slot content
   <template #message>
     You already have an account <a @click.prevent="hasAuthClick()">click here</a> to log in
   </template>
</alert>

Pay attention, the function hasAuthClick() should be defined outside Alert.vue, in the parent component/app.

Check my another antwort for the Render Functions

Adding custom HTML element inside template using functions Vue.js