How to render contents of Link component when href is null

I'm sure there is a sensible workaround for this.

I have a Link Component which I use to wrap another component. I want to display the '' but display the link if the href is null:

            <div>
                <Link :href="paginator.prev_page_url">
                    <IconButton tooltip="Previous Page">
                        <ArrowPrevious
                            width="30"
                            height="30"
                            :class="{
                                'fill-white' : paginator.prev_page_url,
                                'fill-gray-900' : !paginator.prev_page_url
                            }"
                            />
                    </IconButton>
                </Link>
            </div>

I've tried: <Link :href="paginator.prev_page_url" @click.prevent="!paginator.prev_page_url"> but this still rendered an empty anchor tag.

Any thoughts gratefully appreciated!

kiwi0134

3 years ago

Best Answer

Level 8

The way I do that is to use a Component and set the target component based on whether the URL is available or not. This also prevents rendering an anchor tag without a target.

<Component
  v-for="link in links"
  :is="link.url ? Link : 'span'"
  :href="link.url"
  :class="{'class-if-url-does not exist': !link.url, 'class-if-url-exist': link.url}"
  v-html="link.label"
/>

bwrigley

3 years ago

Level 5

@kiwi0134 thanks for the reply!

Ah that's perfect thank you. I'm still very new to Vue and wasn't familiar with the :is attribute.

Thanks again!

1 like

kiwi0134

3 years ago

Level 8

@bwrigley I'm also not that familiar with Vue. The component-trick was something I found here on Laracasts. Not sure where exactly, but it might even have been the InertiaJS series. It's definitely worth a look if you haven't already: https://laracasts.com/series/build-modern-laravel-apps-using-inertia-js

There's also another Series about Inertia, but I haven't watched it yet: https://laracasts.com/series/learn-inertia-with-jeffrey

Quick tip: As the course is already quite old, follow the official documentation (instead of using the same commands Jeffrey uses) and read the comments below the episodes, as some things have changed. Some people point them out.

There's also a Vue3 course. It's still on my watchlist, so I can't say anything about it yet: https://laracasts.com/series/learn-vue-3-step-by-step

Please or to participate in this conversation.