Is there some component from npm for using in VueJS for a timepicker with a unique list, instead of having 2 list, one for the hour and one for the minutes?
I need something like this:
Not like this (Vue-timepicker):
Nor this (https://bootstrap-vue.org/docs/components/form-input):
Nor this (https://bootstrap-vue.org/docs/components/time):
I searched and I found a couple components like Vue-timepicker
https://phoenixwong.github.io/vue2-timepicker/#hourRange
but the user experience is horrible in my case. I dont want the user has to click multiple times to select a time. Even, I need the possibility to type the hour and minute directly without making a selection.
I found a similar component, but it is pay-mode
https://www.syncfusion.com/vue-components/vue-timepicker#:~:text=The%20Vue%20Time%20Picker%20is,directly%20in%20the%20text%20box.
Related
I have 2 questions,
How can I set the value of the global search box and trigger the filter programmatically, using java script (basically I want to implement a persistent filter, based on the last user input, as the user navigates in and out of the page), check image below
Considering the Veu devtool component, I can find the vue-good-table Component and its Search subcomponent. And I can see that there is a value propuerty on this subcomponent that has the same value I had typed in the search box.
So my question is if with this information can I have a way to solve my first question, does the information in the Vue devtool can help me figure out the references to that object and value and then set it?
This could be a very useful tool in case I have a similar problem in the future with another component.
Have very little experience with Veu and general searches on how to access data or elements in components has been confusing, I just understand the properties and events to pass data, but in this case this is an imported component, so I can not hack it.
Thanks #tao, I read the docs before but skipped noticing this property
externalQuery
This is the one that solves the problem, you can link a variable to the search item and I then use your own text input box to implement the solution.
I want to have a component in which I select a range of hours from the 24 hours a day of the weekend has, like this :
it was taken from here: https://github.com/clobucks/week-hours-picker
I want to know if there is a library that emulates this behavior, because as I want to use this in a vue.js 2.6 app and what I've shown here is made in javascript I dont' t know what is the best way to figure it out this
After trying to find solution to this issue for hours on various forums i am posting this here.
So i have two components. 1) App and 2) Todo. Both renderes a list and i can complete items so there will be two lists one for incomplete items and one for complete items. you can click on item and it will be gone to complete items list.
So in my example you can see i am using same component but with two diffreent ways to give data to component. one using API and one using native js Data. in both cases it renderes but with api i can click on list item and it will be gone to completed list but with javascript array example it doesn't work. i am completely amazed with this because component is same. how it can affect like that.
many answer here do tell me that computed properties are not reactive as they are cached but what’s the solution to that ? i can put data variable but then the first case of api will not work because time it takes to fetch it. so please help me with this one.
complete code at sfc playground
You have reactivity issues the computed property probably expects that value to be constant because you provide a non-reactive array from the parent.
I think you have 2 options here:
you either provide a reactive prop from parent
or you set a local data attribute in the child-component so that vue will know that it can change
Your fiddle didn't work for me so I copied your code to codesandbox, I have both examples there but commented out the first solution, there you basically simply add the array to the data object and reference that in the code.
Second solution you can add a mounted hook to define reactiveAssignments to your data in the child component this way it will have the same reference so that's why it would work that way.
I think the first solution is simpler, but it is really up to which one you prefer.
You can check the solutions here in my codesanbox
A better approach could be though by setting up component events instead of v-models in the child you should use it in the parent because this way you are directly modifying the props. You can read more about this here: https://vuejs.org/guide/components/events.html#usage-with-v-model
I need to build this OTP component.
At first it seems to be very simple in terms of design, we just have create 4 boxes and use 1 TextInput component for each.
But the issue with this approach is that user will have to tap every box and write the number.
So, I thought of another idea where we have to use only 1 TextInput component and cover it with a view such that 4 windows are formed through which text could be seen.
Although the approach seems to be fine but I don't understand how do I write code for this.
I use this package in my project https://www.npmjs.com/package/#twotalltotems/react-native-otp-input
I'm using Vue and I wonder if I have a list of components (50 button with the very same function within each one of them) - will Vue recognize it as a repetetive code and reduce to one function that all those 50 button will use or each one will compile it's own function while bundling?
will Vue recognize it as a repetetive code and reduce to one..
No. Vue will not scan your code for similar code and try to optimize it.
However, when Vue is updating a list of elements rendered with v-for, by default it uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index.
Maybe this is what you are confused with? This is not the same as the question you are asking, but the closest thing vue would do "magically".
If you have 50 similar buttons, I would advice you to rather take advantage of props, slots and slot scopes to only have one button component that you can tweek in place where you need them to be different. 50 alike buttons sounds like a bad pattern.