Estoy usando Laravel/Inertia/Vue3, obtengo el objeto de usuario y luego quiero usarlo dentro de otra función, pero siempre está indefinido.
<script setup> // imports... const props = defineProps({ // props... }) const user = computed(() => usePage().props.value.user); const click = () => { alert(`${user.name} clicked`); } </script> Si trato de acceder al objeto de user en el HTML a través de los controles, funciona según lo previsto, pero no puedo usarlo en la función de clic. Por supuesto, podría asignar un const user dentro de la función con el valor usePage().props... pero esto se ve bastante feo, y debe haber otra forma.
Por supuesto, soy bastante nuevo en Vue.
EDITAR #####
Me refiero a esto cuando digo que se ve feo:
<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>Debe haber una manera mejor y correcta
computed() devuelve una ref , por lo que su controlador de clics debe desenvolver el valor a través de la propiedad de value de la ref :
<script setup> const user = computed(() => usePage().props.value.user); const click = () => { //alert(`${user.name} clicked`); ❌ alert(`${user.value.name} clicked`); ✅ } </script> Alternativamente, puede evitar el desenvolvimiento con la Transformación de reactividad en <script setup> (es decir, $computed() en este caso):
<script setup> //const user = computed(() => usePage().props.value.user); const user = $computed(() => usePage().props.value.user); const click = () => { alert(`${user.name} clicked`); } </script>