Click handler on v-for loop in vue3 not showing up in the DOM - vuejs3

Question

I have run into a roadblock on a project where everything seems to be working fine except that I can't seem to add a click handler on a v-for loop object.
Here's the demo code that is structured very similarly to my original code
<template>
<article>
<a
v-for="(post, index) in posts"
:key="index"
target="_blank"
#click="alert(post.title)"
>
<figure >
<img
:src="post.source_url"
:alt="post.title"
/>
<figcaption>{{ (post.title) }}</figcaption>
</figure>
</a>
</article>
</template>
<script setup>
const posts = [
{
title:"abc",
content:"defg",
source_url:"https://unsplash.it/200/100",
},
{
title:"uvw",
content:"xyz",
source_url:"https://unsplash.it/150/101",
}
]
</script>
Here's the link to codepen as well..
https://codepen.io/alimbolar/pen/XWBzgVX
The console.log shows this error on codepen..
"[Vue warn]: Unhandled error during execution of native event handler" "
" " at <Pen>"
but on my original code there's no error on localhost.. it's just that the click handler is just not appearing in the dom..
I would appreciate some guidance on what I am doing wrong as I seem to have tried everything and I know maybe it's something very very basic that I am missing.. please advise.
Regards,
Alim

Answer 1

That's just a warning. The real error is given in the console right after:
Uncaught TypeError: _ctx.alert is not a function
The context of inline handlers is not the same as window. You need to call the alert function from a method in your component script.
#click="showAlert(post.title)"
const showAlert = (title) => {
alert(title)
}
updated codepen