Closed ericmp33 closed 1 year ago
Steps to reproduce the issue:
composer i
npm i
php artisan serve
npm run dev
Click the button that appears in the browser (component located in resources/js/Pages/Test.vue). Open the browser's console. You will notice there is 1 console log:
resources/js/Pages/Test.vue
<template> <Head title="Something" /> <button @click="doStuff($el)" v-text="`click me`" class="bg-red-500 hover:bg-red-600 p-2 rounded" /> </template>
![image](https://user-images.githubusercontent.com/60661635/218161696-3c6baff3-d014-4a48-bbeb-537308e63dd7.png) 4. Remove the `Head` component from the `template` (actually remove it, don't comment it). Click the button again. Now, the console log has changed! ```html <template> <button @click="doStuff($el)" v-text="`click me`" class="bg-red-500 hover:bg-red-600 p-2 rounded" /> </template> <script setup> import { Head } from '@inertiajs/vue3' const doStuff = $el => console.log($el) </script>
So seems the Head component modifies something and makes that the elements that you pass in the functions of the template don't work fine 🤯.
Head
Seems wrapping it all inside a div makes it work. Is not an Inertia bug,
More info: https://discord.com/channels/592327939920494592/601127114288136193/1084183744484741120
Steps to reproduce the issue:
composer i
,npm i
,php artisan serve
,npm run dev
.Click the button that appears in the browser (component located in
resources/js/Pages/Test.vue
). Open the browser's console. You will notice there is 1 console log:So seems the
Head
component modifies something and makes that the elements that you pass in the functions of the template don't work fine 🤯.