I have a basic login form in Vue 3 that I am trying to validate using vee-validate#next composition api way. You can check it out at stackblitz: https://stackblitz.com/edit/vue-zauhqb
But I am having issues...values that are injected to valiadtionSchema property functions are always undefined...
So first time the form is rendered, the value of arguments in username and password validationSchema object functions are undefined (makes sense, there is no input), but even if I enter something and hit Submit, they are undefined.
Where is a problem with this code...
Thank you
Well, according to this bug issue that I have posted on vee-validate git hub repo: https://github.com/logaretm/vee-validate/issues/3658, you should call useForm() before any useField() calls...so after moving useField() below useForm() everything works as expected...
Related
I am passing a parameter forum, which is an Object to a route in Vue.js (using vue-router)
{
path: '/forum/:forum',
name: 'ForumView',
component: ForumView,
props: true
}
When i leave that specific forum route by using another link( to something like forum/post) on the page and after that try to go back to the form page using the back button in the browser I get the following error in the console
Invalid prop: type check failed for prop "forum". Expected Object, got String with value "[object Object]".
So the router passes the javscript object when using the router link. But when using the back button of the browser (accessing the history), the object is converted into a string.
Curious if there is a fix for that or if I can't / shouldn't pass objects as parameters
"But when using the back button of the browser (accessing the history), the object is converted into a string"
...this is not entirely correct. The object is converted to a string much sooner - at the time you are navigating to your forum route to be precise. When you use back button, there is no object at all. There is only URL with dynamic :forum segment replaced by the text "[object Object]" (just check browser's URL bar)
This is the problem when passing objects through the router. Because even if you use Router in history mode and the browser's history API is used behind the scenes, router doesn't store any parameters when calling history.pushState. It pushes only URL. So if you really need something to pass to a target component, that information should by encoded in the URL (route definition) in the form of dynamic segment or as query string...
Another benefit of such solution is that your app doesn't stop working when user copy/paste the URLs :)
Or you can use something like Vuex to create shared state and only pass around some simple identifier which is much easier to put in the url/route...
Context
i have a User object which is the data model for a vue.js UserComponent. When the component is mounted the user has undefined fields. Then inside the mounted() method the user is fetched from the server and all its fileds are setted.
Problem
So i found that vue-test-utils doesn't redraw component when user's fields changed.
Note
On the other hand the same test works good if i change object prop to scalar.
I tried to reset user prop by wrapper.setProp({user: user}) after its fields was fetchad. Unfortunatelly it is impossible as vue-test-utils preventing to set the same object to prop.
Demo repo (cloned from official vue-test-utils-getting-started)
https://github.com/alexey2baranov/vue-test-utils-getting-started
When your component have async methods, like fetch user fields on mounted, you have two options when testing:
Option 1: Test with an async function and await for the nextTick
Option 2: Use the package flush-promises
Both options are detailed in the vuejs test utils documentation with examples.
Also, you can mock axios response with some data for populate your user fields without a real fetch to your backend.
I´m writing a Nativescript-vue app for a Time-Tracking Project.
I use TimePickerField for this but it doesn´t work actually.
I already tried to v-model my time to a variable "selectedTime".
But when I log the variable, i get an undefined.
<TimePickerField locale="de_DE" hint="From..." pickerOkText="Ok" pickerCancelText="Cancel" pickerTitle="Choose" v-model = "selectedTime"></TimePickerField>
It should log the selected Time but i get: "selectedTime is undefined".
Does anybody work with this TimePickerfields and know how to handle them.
Here is the documentation of this component: https://www.npmjs.com/package/nativescript-datetimepicker
When I provide loadOptions to an Async control it loads options on mount.
If I pass autoload={false} then it doesn't load options neither on mount nor on open. But it loads options on the first close (or type, or blur).
If I pass onCloseResetsInput={false} then it doesn't load options until I type something. (showing "Type to search" in the menu)
Async provides onOpen handler, but I didn't find the way to use it in this situation. (and react-select#2.0.0-alpha.2 doesn't have it)
So the user needs to type a character, then delete it, to see the full list of options.
How can this be avoided?
Example sandbox: https://codesandbox.io/s/mjkmowr91j
Solution demo: https://codesandbox.io/s/o51yw14l59
I used the Async options loaded externally section from the react-select repo.
We start by loading the options on the Select's onFocus and also set the state to isLoading: true. When we receive the options we save them in the state and render them in the options.
I also keep track of optionsLoaded so that only on the first focus do we trigger the call to get options.
In our use case, we have several of these select inputs on a single page, all async, so the requests to the server will pile up, and are completely unnecessary in a lot of cases (users won't even bother clicking).
I found a workaround for this issue that'll work for my use case on 2.0.0-beta.6:
Include defaultOptions
Add 2 members to your class that will store the resolve/reject methods for the promise.
In your loadOptions function, check if the input is '', if so, create a new promise, and store the values of resolve/reject within your class members, and return that promise. Otherwise, just return the promise normally to get your results.
Add an onFocus handler, and within it call the function to get your results, but also add .then and .catch callbacks passing the resolve and reject functions you stored previously.
Essentially, this makes react-select think you're working on getting the results with a long-running promise, but you don't actually even try to load the values until the field is selected.
I'm not 100% positive there aren't any negative side effects as I just wrote this, but it seems like a good place to start.
Hope this helps someone. I may submit a feature request for this.
In order to load options when user focus first time, set defaultOptions={true}
Thanks, Alexei Darmin for the solution, I was struggling with this... while testing it I converted the solution to a react functional component and added real API fetching.
Here is a working demo, I hope it helps someone
Is there any way I can ask the VueJS to wait for a while before handling the DOM bugs?
I have for example a select that receives av-model coming from the API, but as VueJS loads the DOM first before the http call, it already accusesselect error
type check failed for prop "options". Expected Array, got Undefined.
This error is right because it draws the DOM with nothing in the select, but then it fills in with my call to API. Is there any way I can ask VueJS to wait a little bit for me to bring the API data and then it checks DOM?
Thank you!!
Note: I know that initializing the parameter with empty array works, but wanted another way without being manual