The scenario involves a parent and child Vue components. In this setup, the child component transmits data to the parent component via a simple object emitted using the emit method.
Data in the child component:
const Steps [
{
sequence: 1,
name: "Personal",
description: `<p>Enter your name and phone number</p>`,
},
{
sequence: 2,
name: "OTP",
description: `<p>An OTP code has been sent to you. Resend code</p>`,
},
]
const SelectedStep = ref( 0 );
const ActiveStep = ref( {} );
SelectedStep.value += 1;
ActiveStep.value = Steps.find(step => {
return step.sequence === SelectedStep.value
})
emit('SelectedStep', ActiveStep.value);
Based on the selected sequence, the corresponding object from the Steps array is loaded into ActiveStep and then sent to the parent component.
However, the issue arises when trying to render a link within the object with sequence: 2 in the description. Ideally, it should be a clickable link that triggers a function to resend the code. An example of the desired format:
{
sequence: 2,
name: "OTP",
description: `<p>An OTP code has been sent to you. <a v-on:click="resendOTP">Resend code</a></p>`,
},
Unfortunately, the v-on:click attribute is not being interpreted and remains as plain text in the HTML output.
The parent component functions as a view that utilizes the child component:
<header>
<h1>{{ActiveStep.title}}</h1>
<div v-html="`${ActiveStep.description}`">{{ActiveStep.description}}</div>
</header>
<div>
<div class="content">
<Component-Signup v-on:SelectedStep="updateActiveStep"/>
</div>
</div>
<script>
import ComponentSignup from "../../components/Signup.vue"
export default {
components: {
"Component-Signup": ComponentSignup
},
setup() {
const ActiveStep = ref({});
function updateActiveStep(SelectedStep) {
ActiveStep.value = SelectedStep
}
return {
updateActiveStep,
ActiveStep
}
}
}
</script>
How can the desired behavior be achieved in this context?