Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix inertia-link crashing when self-closing #306

Merged
merged 2 commits into from
Mar 26, 2021
Merged

Fix inertia-link crashing when self-closing #306

merged 2 commits into from
Mar 26, 2021

Conversation

m1guelpf
Copy link
Contributor

@m1guelpf m1guelpf commented Oct 29, 2020

This PR fixes an error triggered when you create self-closing inertia-link component, which sets slots to null:

<inertia-link class="absolute inset-0 z-10" :href="route('dashboard.edit', dashboard).url()" />

@m1guelpf m1guelpf changed the title Fix link when no content Fix inertia-link crashing when self-closing Oct 29, 2020
@claudiodekker claudiodekker added bug Something isn't working vue 3 Related to the vue 3 adapter labels Oct 29, 2020
@claudiodekker
Copy link
Member

Use-case: You have a list of blog posts, with a title, summary & "read more" link, but want the entire blog post to be clickable and behave like the "read more" link while still keeping links that are part of the summary functional.

Because HTML can't have nested links, there's two solutions to this problem:

  1. Make the parent div clickable instead of wrapping it in a link (vue: <div @click="readMoreAction" ...)
  2. Create an empty link that you overlay on top of the whole blog post summary (z-index), and make the links inside the summary an even higher z-index so they end up on top of the overlay.

This PR aims to solve the 2nd approach.

@dillingham
Copy link

dillingham commented Mar 24, 2021

@claudiodekker ran into this when copying the pingcrm paginator into a jetstream project

<inertia-link v-else :key="key" class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500" :class="{ 'bg-white': link.active }" :href="link.url" v-html="link.label" />

Notably, the v-html at the end / absence of default slot.

Uncaught (in promise) TypeError: i.default is not a function

Co-authored-by: Claudio Dekker <1752195+claudiodekker@users.noreply.github.com>
@reinink reinink merged commit 03784e5 into inertiajs:master Mar 26, 2021
@reinink
Copy link
Member

reinink commented Mar 26, 2021

Awesome, thanks for fixing this! 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working vue 3 Related to the vue 3 adapter
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants