<v-time-picker> - did you register the component correctly? For recursive components, make sure to provide the "name" option
<div class="form-inline">
<label for="">Time</label>
<v-time-picker
class="theme-orange"
v-model="time"
input-class="form-control"
type="time"
auto>
</v-time-picker>
</div>
I need to get only time picker, how can i fix this issue?
This is the Vuetify code for the time picker
<v-time-picker v-model="time" header-color="primary"></v-time-picker>
You must make sure that you have the v-model associated even in the JS, the variable in your JS can be null or string and you can use it for any function.
In your JS it must be like this
data:{
time: ''(this is most recommended) or time: null
}
The error message means that you have not imported the component in your file. Another approach is to add vuetify globally to your project. To fix this, add the following line in your main.js/index.js file:
import Vuetify from 'vuetify';
// ...other import statements
Vue.use(Vuetify)
Related
Hello nice people of Internet ;)
New job, new language. I need to modify Ipyvuetify Vue code in Jupiter notebooks to use static props.
I was able to throw together simple vue example
where I am able to set prop of child component via assigned static text in declarative way in vue file.
And it works just fine in js variant. https://jsfiddle.net/wu9bxL1n/1/
But the same approach doesn't seem to work at all in ipyvuetify syntax. No error no nothing. Static string assigned to child prop is just being silently ignored and I can't seem to find anything in docs as for why. What did I missed ?
Here is the smallest possible code in ipyvuetify syntax copy/pastable to Jupiter notebook.
import ipyvuetify as v
import traitlets
class AA(v.VuetifyTemplate):
template = traitlets.Unicode('''
<template>
<v-card-title>{{label}}</v-card-title>
</template>
<script> export default { name: "aa", props: ['label'] } </script>''').tag(sync=True)
label = traitlets.Unicode('But this is showing default text instead').tag(sync=True)
class BB(v.VuetifyTemplate):
template = traitlets.Unicode('''
<template>
<div>
<v-text-field label="This text was set statically" ></v-text-field>
<aa label="This text was set statically"></aa>
</div>
</template>''').tag(sync=True)
components = traitlets.Dict(default_value={'aa': AA()}).tag(sync=True, **v.VuetifyTemplate.class_component_serialization)
BB()
---
Output:
This text was set statically
But this is showing default text instead
O boy.
Answer was some undocumented behavior seen in some 3rd party lib source code.
we need to use
default_value={'aa': AA }
instead of
default_value={'aa': AA()}
then setting static props to your own components will work.
Weird I know.
Hopefully people solving the some problem will find this.
Take care guys ;)
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)'
]
}
Versions:
VueJS: 3.x
Chrome: Version 93.0.4577.63 (Official Build) (x86_64)
macOS: Big Sur 11.5.2
My use-case must be common, and I am mildly surprised that it does not work "out of the box".
I have these simple routes:
/patients/new
/patients/1
/about
which I access from a single-page application (SPA) through vueJS router-links:
<router-link to="/about">About</router-link> |
<router-link to="/patients/new">New Patient</router-link> |
<router-link to="/patients/1">Update Patient</router-link>
/patients/1 returns a pre-populated HTML FORM with details of patient with ID 1.
/patients/new returns the same HTML FORM with blank entries.
Intuitively, if I visit /patients/1 link, and then visit /patients/new, I would expect HTML FORM to be empty; conversely, if I visit /patients/new and then /patients/1, I would expect the HTML FORM to be pre-populated accordingly.
This is not what happens. Instead, the SPA does not re-create / re-mount the HTML FORM.
Solution: many articles suggest using a reactive variable referenced by a :key attribute in the HTML FORM. Then whichever link we visit, as long as we change the reactive variable, the vueJS component that houses the HTML FORM should be re-created / re-mounted.
My approach: provide a reactive variable at the root component, and inject it within the vueJS component (ie, the Patient component here) that renders the HTML FORM.
Here's what my root component looks like:
<script lang="ts">
import { defineComponent } from 'vue'
import Vue from 'vue'
export default defineComponent({
name: "App",
provide() {
return {
routePath: Vue.computed(() => this.$route.path)
}
}
});
</script>
where the reactive variable is routePath. Then in the Patient component, I have this:
export default defineComponent({
name: "Patient",
inject: ['routePath'],
...
});
with the HTML FORM defined with the :key attribute like this:
<template>
<form :key="routePath">
...
</form>
</template>
I believe the basic idea here is sound, but it is not working, and it does seem like a cumbersome approach.
So, here are my questions:
Is this approach sound?
Why is the Vue.computed() invocation broken? Here's the stack trace from Chrome console:
App.vue?3acc:9 Uncaught TypeError: Cannot read properties of undefined (reading 'computed')
at Proxy.provide (App.vue?3acc:9)
at qe (runtime-core.esm-bundler.js:2463)
at Pr (runtime-core.esm-bundler.js:6713)
at Lr (runtime-core.esm-bundler.js:6632)
at Tr (runtime-core.esm-bundler.js:6562)
at D (runtime-core.esm-bundler.js:4421)
at N (runtime-core.esm-bundler.js:4396)
at m (runtime-core.esm-bundler.js:3991)
at K (runtime-core.esm-bundler.js:5140)
at mount (runtime-core.esm-bundler.js:3477)
Thanks for looking into it.
It appears this issue is unresolved in vueJS 3.x. See open issue for details. There are work-arounds. Eg, see this github project. In my case, I've decided to change the workflow to avoid said issue.
I am using Next.js and module.css in a project.
But I have a problem. I have a "button" component inside a component. I want to give both normal className and Style.myClass to that button component. is there a way to do this?
Sorry the question might be a bit complicated, you can understand better with the example below
<Button className={(Style.MyModuleCssClass, "my-global-class")}
size={"large"}
type="primary"> GET MORE
</Button>
can I write a code like this? ie one global class name and one module.css class name
Multiple classname is not a problem, but normally you need to put the classname together like a string operation.
<Button className={`${Style.MyModuleCssClass} my-global-class`} />
Unless you have a library to help you, https://github.com/JedWatson/classnames#readme
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"