Rymercyble's avatar

inertia link error

hello it's not exactly related to vue but more to inertia

i'm using vue 3 for this

this is my page

<template>
    <div class="bg-white rounded-md shadow overflow-x-auto">
        <table class="w-full whitespace-nowrap">
            <tr class="text-left font-bold">
                <th class="px-6 pt-6 pb-4">Action</th>
            </tr>
            <tr v-for="log in logs.data" class="hover:bg-gray-100 focus-within:bg-gray-100">
                <td class="border-t">
                    <inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="route('logging.logs.index', log.id)">
                        {{ log.action }}
                    </inertia-link>
                </td>
            </tr>
            <tr v-if="logs.data.length === 0">
                <td class="border-t px-6 py-4" colspan="4">No logs found.</td>
            </tr>
        </table>
    </div>
    <pagination class="mt-6" :links="logs.links"/>
</template>

<script>
import Pagination from "@/Components/Pagination";

export default {
    components: {
        Pagination,
    },
    props: {
        logs: Object,
        filters: Object,
    },
}
</script>

this is component

<template>
    <div v-if="links.length > 3">
        <div class="flex flex-wrap -mb-1">
            <template v-for="link in links">
                <div v-if="link.url === null" class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded" v-html="link.label"/>
                <inertia-link v-else 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"/>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        links: Array,
    },
}
</script>

and the problem is inertia-link in pagination component it throws Uncaught (in promise) TypeError: i.default is not a function

in main template for page itself inertia link works and also it works if i change it to standard a tag

0 likes
2 replies
Rymercyble's avatar

meanwhile i observed it happens when it's inside of that exact loop no matter in which component it is

piljac1's avatar
piljac1
Best Answer
Level 28

In your pagination component, have you tried outputting your link label between an opening and closing inertia-link tag like you did in your page? If you really need to interpret HTML, you might want to use a span.

<inertia-link
  v-else
  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"
>
  <span v-html="link.label"></span>
</inertia-link>
1 like

Please or to participate in this conversation.