在故事书中实施惯性链接
嗨，我正在尝试故事书，到目前为止喜欢它！
我的问题是，我在我的Laravel应用程序（惯性）中实施它。 Im trying to render a navigation link component, which uses the inertia links wrapper: https://inertiajs.com/links
该组件在故事书中注册，但没有渲染，因为惯性链接代替了HTML 代码。有没有办法在故事书中导入惯性链接，从而使渲染成为可能？
如果我通过检查将HTML中的标签移动到锚定标签（），则组件渲染。这告诉我，确实是惯性链接，这让我头疼。
我已经尝试了一段时间，我也尝试搜索SOM时间，但是我根本找不到答案:(
我会让您更新。
如果我有新发现， 我发现控制台显示了此错误，这进一步使我的假设是惯性链接组件：
[Vue warn]: Failed to resolve component: Link
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <AppNavLink href="/" >
vue组件的代码：
<Link
class="font-medium uppercase hover:text-blue-600 dark:hover:text-blue-400"
:class="{
' text-blue-500 hover:text-blue-500 dark:hover:text-blue-500': active,
}"
>
<slot />
</Link>
</template>
<script>
export default {
props: {
active: Boolean,
},
}
</script>
故事：
import NavLink from '../resources/js/components/ui/AppNavLink.vue'
import { Link } from '@inertiajs/inertia-vue3'
//
Hi im trying out storybook, loving it so far!
My issue is that im implementing it in my Laravel app, with inertia. Im trying to render a navigation link component, which uses the inertia links wrapper: https://inertiajs.com/links
The component is registered in storybook, but does not render, because the of the inertia-link replacing the html in the code. Is there a way to import the inertia link in storybook, making rendering possible?
If I manually change the tag in the html via inspection to an anchor tag (), the component renders. Which tells me that it is, indeed the inertia-link, giving me a headache.
I have tried for some time now, I also tried searching for som time, but I simply can't find an answer :(
Will keep you updated if I make new discoveries.
Edit
I discovered that the console displays this error, which further makes my assumption that its the inertia-link component:
[Vue warn]: Failed to resolve component: Link
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <AppNavLink href="/" >
The code of the vue component:
<Link
class="font-medium uppercase hover:text-blue-600 dark:hover:text-blue-400"
:class="{
' text-blue-500 hover:text-blue-500 dark:hover:text-blue-500': active,
}"
>
<slot />
</Link>
</template>
<script>
export default {
props: {
active: Boolean,
},
}
</script>
The story:
import NavLink from '../resources/js/components/ui/AppNavLink.vue'
import { Link } from '@inertiajs/inertia-vue3'
//???? This default export determines where your story goes in the story list
export default {
/* ???? The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Design System/Navbar link',
component: NavLink,
subcomponents: { Link },
}
//???? We create a “template” of how args map to rendering
const Template = (args) => ({
components: { NavLink, Link },
setup() {
//???? The args will now be passed down to the template
return { args }
},
template: ' <NavLink href=args.href > Posts </NavLink>',
})
export const Default = Template.bind({})
Default.args = {
/* ???? The args you need here will depend on your component */
href: '/',
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我相信您对出口默认的声明不好，应该是：
I belive you have a bad declaration on export default, it should be: