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 a ref, so your click handler needs to unwrap the value via the ref's value prop:
<script setup>
const user = computed(() => usePage().props.value.user);
const click = () => {
//alert(`${user.name} clicked`); ❌
alert(`${user.value.name} clicked`); ✅
}
</script>
Alternatively, you can avoid the unwrapping with the Reactivity Transform in <script setup> (i.e., $computed() in this case):
<script setup>
//const user = computed(() => usePage().props.value.user);
const user = $computed(() => usePage().props.value.user);
const click = () => {
alert(`${user.name} clicked`);
}
</script>