I'm working on VueJS 3, where I've created my own components. Scenario is like below:
Already I have created a button component, and it's working perfectly independently.
I've created another datatable component which also working fine independently.
But the problem is: whenever I include or call my button component inside datatable component, everything working fine except button component and raised Vue warning like below:
VUE warning: "runtime-core.esm-bundler.js?5c40:6584 [Vue warn]: Failed to resolve component: q-button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement."
How can I solve the issue?
I've solved the problem by using <slot name="add-items-actions"></slot>
in my datatable( parent component ) and in child component I passed below code:
<template #add-items-actions class="mb-3">
<router-link class="text-muted" to="/organization/service-area-add">
<q-button class="d-none d-sm-block" icon="i-Add">Add service area</q-button>
</router-link>
</template>
After that no error is raised and button component loaded correctly. Thanks all for giving a try.
Related
I am trying to programmatically route to a detail page from within a list in Nuuxt3 app:
#/pages/items/index.vue
<script setup lang="ts">
const gotoDetail = async (itemId) => {
await navigateTo(`/items/${itemId}`)
}
</script>
<template>
<div>
<NuxtLayout name="main-standard">
<template #main-content>
<div v-for='item in items' :key=item>
<div #click='gotoDetail(item.id)'
</div>
</template>
<template #main-content>
<!-- aside content -->
</template>
<NuxtLayout>
</div>
</template>
And I am getting this error message:
ERROR: Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
I have searched for an answer and most solutions mention to wrap the <NuxtLayout> with a div. But that did'nt solve my issue.
I am using a default Layout. So the<NuxtLayout name="main-standard"> is inside this default layout. Both pages: index.vue and [itemId].vue are in the pages/items/ folder.
I am doing something wrong but just can't find it. Does anyone see whats going on?
A few things here are going to break your code.
One, the middle div with the click handler is missing a closing >, contents, and a closing </div>. (Of course you may have omitted that for brevity)
items isn't defined, so there's nothing to iterate over.
You're using the same v-slot name #main-content for multiple templates, but each slot name should be unique. The # attributes (shorthand for v-slot) should match the slot names you write in your layout, and those must also be unique within the component.
The main problem looks to be related to the way you're using layouts. To mess with layout on a page using the component, you have to add this into the setup script:
definePageMeta({
layout: false,
});
A different way of applying your custom layout to this page is to replace the false boolean with the name of the layout, and omit the tag from this page altogether. For that to work, app.vue should have a <NuxtLayout> tag wrapping the <NuxtPage>
Not a breaking change, but it may also simplify things to write
<NuxtLink :to="`/items/${itemId}`">{{ whatever you wanted inside that div }} </NuxtLink>
If you need to run code before navigating to that page, you can add it into the top-level middleware folder, and call that named middleware on the page before which you want it to run.
I use Next.js and the MUI design system in my project. In one of the components I use a table with multiple pages and use the Pagination component from the MUI to view different pages in the table. At the moment I use the a tag but I want to be able to use Next.JS' Link component instead.
This is what my working code looks like:
<PaginationItem
component={'a'}
href={`/tunes${item.page === 1 ? '' : `?page=${item.page}`}`}
{...item}
/>
This is what I tried to write:
<PaginationItem
component={Link}
href={`/tunes${item.page === 1 ? '' : `?page=${item.page}`}`}
{...item}
/>
I get this error message: Error: Multiple children were passed to <Link> with 'href' of '/tunes?page=0' but only one child is supported https://nextjs.org/docs/messages/link-multiple-children Open your browser's console to view the Component stack trace.
So the problem seems to be that MUI Pagination component fits two children inside Link, although the Link tag only tolerates one. It looks like this in the console (when using the a tag):
<a
class='MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-sizeSmall MuiPaginationItem-text MuiPaginationItem-circular MuiPaginationItem-textPrimary MuiPaginationItem-page css-1vj5it5-MuiButtonBase-root-MuiPaginationItem-root'
tabindex='0'
href='/tunes?page=3'
aria-label='Go to page 3'
>
3
<span class='MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root'></span>
</a>
Is there a way to combine Next.js' Link component with MUI's Pagination component? Maybe wrap the items inside somehow, or make Link accept more than one child inside it?
I can't seem to resolve this error I am getting in Storybook. I have the following file called Button.stories.mdx:
import { Meta, Story, ArgsTable, Canvas } from '#storybook/addon-docs/blocks';
import Button from './Button';
import ButtonStory from './Button.stories.tsx'
<Meta title="Components/Button" component={Button} />
export const Template = (args) => <Button {...args } />
# Button Component
---
This Button component is supposed to handle all states for a button. It extends off of the HTML button type so that you should have all native HTML features that a button would provide.
We may make some of these optional props required if we deam that it is important. This is usually an accessibility call.
This button should handle actions that occur on the page and if you want to use a href to make it a link you should surround it within an a tag.
Types supported by aero-design-system:
- Primary
- Secondary
## Quick Start
To create a button, use import the `Button` and give it the following props `props`.
<Canvas>
</Canvas>
<ArgsTable of={Button} args={{
backgroundColor: { control: 'color' }
}} />
And I am getting the following error:
Couldn't find story matching 'components-button--page'.
I have tried placing a blank story in there with that ID but that didn't seem to fix anything. I just got a new error
Uncaught Error: Docs-only story
I haven't been able to see anything related to this on here yet.
In my case, the problem was simple, I was trying to load unexisting story:
http://localhost:6006/?path=/story/spoiler--primary
instead, I should've loaded this :)
http://localhost:6006/?path=/story/testcomponent--primary
Something that storybook's documentation doesn't seem to mention is a few important bits:
<Story/> component must have a name property with at least ONE character
<Story/> component must have at least a single child within it
Meaning, the minimum requirement to get the mdx file to render when using the <Story/> component is this:
<Story name="default">
<Button/>
</Story>
This is regardless of whether the <Story/> component is wrapped around the <Canvas/> component or not.
The second half of the problem is <Canvas/> component, and it has just one condition:
It must have at least a single child within it
so the mimimum requirement for <Canvas/> to render is this:
<Canvas>
<Button/>
</Canvas>
Combining everything together for your case scenario, what you need to do with <Canvas/> is this:
<Canvas>
<Story name="default">
<Button/>
</Story>
</Canvas>
Try setting it that way, then refresh the page.
If you are using storybook v6. Try to check stories property at your .storybook/main.js. Make sure the path/file type is correct.
module.exports={
stories:[
'../src/components/Button.stories.mdx', // default page
'../src/**/*.stories.#(js|jsx|ts|tsx|mdx)'
]
}
I have a vue component that shows a popover with some content using the headlessui for vue and I want to close it when I click on the content. I have read the headlessui/vue docs for manually handling the opening and closing of a Popover which states:
If you'd rather handle this yourself (perhaps because you need to add an extra wrapper element for one reason or another), you can pass a static prop to the PopoverPanel to tell it to always render, and then use the open slot prop to control when the panel is shown/hidden yourself.
I have:
<Popover v-slot="{ open }">
<PopoverButton>
</PopoverButton>
<div v-if="open">
<PopoverPanel static>
</PopoverPanel>
</div>
</Popover>
and it works so far but I want to close the Popover when I click the some content inside it, essentially I want to know how I can access that "open" in my script. I'm quite new to vue so maybe I'm missing something simple.
One workaround would be to manually click the PopoverButton inside of the panel.
Here's an example how that could work in React:
const buttonRef = useRef();
<Popover>
<Popover.Button ref={buttonRef}>Click me</Popover.Button>
<Popover.Panel>
<button onClick={() => buttonRef.current?.click()}>Content</button>
</Popover.Panel>
</Popover>
Using https://github.com/danprince/ng-picky plugin
HTML is
<div ng-app="myApp" ng-controller="ngPicky">
<div class="category_header forum_category" style="background:{{color | toHex}};"></div>
<picker color="color"></picker>
both ng-picky.js and ng-picky.css are loaded, so is Angular. But the colour picker it is supposed to display is not shown. I guess css and js has not been called. Any help would be appreciated.
You have to declare the module ngPicky as a dependency of your app. The declaration of your app should look like the following:
angular.module('myApp', ['ngPicky']);
Except if you defined a controller named ngPicky, the following has no sense:
ng-controller="ngPicky"