I'm using Laravel/Inertia/Vue3, I get the user object, and then I want to use it inside other function, but its always undefined.
<script setup>
// imports...
const props = defineProps({
// props...
})
const user = computed(() => usePage().props.value.user);
const click = () => {
alert(`${user.name} clicked`);
}
</script>
If I try to access the user
object in the HTML vía the handlebars, it works as intended, but I can't use it in the click function. Of course I could assign a const user
inside the function with the value usePage().props...
but this looks quite ugly, and there must be another way.
Of course, I'm pretty new to Vue.
EDIT #####
I'm refering to this when I say it looks ugly:
<script setup>
// imports...
const props = defineProps({
// props...
})
const user = computed(() => usePage().props.value.user);
const click = () => {
const user = usePage().props.value.user;
alert(`${user.name} clicked`);
}
</script>
There must be a better and correct way
computed()
returns aref
, so your click handler needs to unwrap the value via theref
'svalue
prop:Alternatively, you can avoid the unwrapping with the Reactivity Transform in
<script setup>
(i.e.,$computed()
in this case):