How to check InertiaRequest props with if else Vue Inertia Laravel

Question

So I want to check if the props received from HandleInertiaRequest is null or not in my v-if from my vue component, but it always throws error like this

Navbar.vue:66 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'name')
    at Proxy._sfc_render (Navbar.vue:66:46)
    at renderComponentRoot (runtime-core.esm-bundler.js:816:16)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5701:46)
    at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)
    at instance.update (runtime-core.esm-bundler.js:5814:51)
    at setupRenderEffect (runtime-core.esm-bundler.js:5822:5)
    at mountComponent (runtime-core.esm-bundler.js:5612:5)
    at processComponent (runtime-core.esm-bundler.js:5565:9)
    at patch (runtime-core.esm-bundler.js:5040:11)
    at mountChildren (runtime-core.esm-bundler.js:5284:7)

I do it by using v-if like this

<div v-if="$page.props.auth.user.name">
                <p>{{ $page.props.auth.user.name }}</p>
            </div>
            <div v-else>
                <Link :href="route('login')">
                    <p class="btn btn-ghost">Sign in</p>
                </Link>
            </div>

but when the props is not null it succeeded doing the if statement, but when it is null it throws that error

I've already tried to use isset but it still throws an error

<div v-if="isset($page.props.auth.user.name)">
                <p>{{ $page.props.auth.user.name }}</p>
            </div>
            <div v-else>
                <Link :href="route('login')">
                    <p class="btn btn-ghost">Sign in</p>
                </Link>
            </div>

`v-if="$page.props.auth.user?.name"` perhaps? This way, if user is null, the v-if is negative and no exception is thrown. — Hovercraft Full Of Eels, Jul 24 '23 at 19:42
ohhh thank you its work, please answer the question so I can mark it as answered — cherno304, Jul 24 '23 at 19:45
No, this same sort of question has been asked and answered too many times before. Best for you to either accept the duplicate or delete this very redundant question. — Hovercraft Full Of Eels, Jul 24 '23 at 19:46
Okay I will delete this question, Thank you for commenting, I cant found the post that you suggested because I dont know the keywords — cherno304, Jul 24 '23 at 19:51
correction: if user is null, the v-if is `false`, not "negative" — Hovercraft Full Of Eels, Jul 24 '23 at 19:54
I guess I will accept the duplicate, incase someone have the same problem — cherno304, Jul 24 '23 at 19:54

How to check InertiaRequest props with if else Vue Inertia Laravel

0 Answers0