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
Related
I want to get access to this.$el in asyncData.
I use a database to store translations.
I want to get a list of translations that are used on the current page.
Then I will send a request to the server to receive them.
After that, I will merge it.
i18.mergeLocaleMessage( locale, message )
How to do it ?
You can access i18n with something like this, no need to access the template for this use case
asyncData ({ app }) {
console.log(app.i18n.t('Hello'))
}
Looking at the lifecycle of Nuxt, asyncData will happen before any template is generated at all, so it is impossible with asyncData.
And even if it was possible with some hacky trick, it would be a bit strange to have to look inside of your template to then have some logic for i18n fetching.
Why not getting a computed nested object and loop on this through your template, after you have fetched all of your required translations ?
Also, you're using asyncData + an API call each time ? So, for every page: you will stop the user, let him wait for the API call and then proceed ?
Latest point, if you are on your page and you hit F5, then asyncData hook will not be triggered. Just to let you know about this caveat.
Alternative solutions:
using the fetch() hook and display a loader until you have fetched all your translations, still better to not rely on the content of the template. This will work even on F5 and can produce a more smooth experience (by not blocking the navigation).
getting your i18n whole translations globally, at some point when your user's connection is idle. Rather than on per-page. Especially because you will need to handle the logic of not fetching some translations that you already have (if the user visits a page twice).
Im new to VueJS.
I'm trying to understand the syntax behind emitting events.
There is the following video tutorial where I'm having problems understanding what happens:
https://www.youtube.com/watch?v=5pvG6fzkdFM
Here is the code:
Inside parent:
https://imgur.com/bxcyjZq
https://imgur.com/Rynifqq
And Child (emitting component):
https://imgur.com/iHh3zc3
Now, the first thing I very much DONT understand is how the "v-on:CustomEvent" actually works.
v-on, as I understand it, attaches an event handler. But it doesnt specify it, does it? I usually have to type "v-on:click". So why does anything happen at all in this tutorial when this code is executed? Nowhere is there a definition what kind of event shall trigger the function.
And the second thing is how the data is handled.
In the header, inside the parameter of the function, $event is handed over.
But how is this supposed to give any useful data? The event usually is an object where I have to get the payload extracted manually, like event.target.value?
So why does this work?
You code looks fine, there is no fix needed
Alternate way is, no need to mention $event, it automatically pass with the arguments by just mentioning the method name
<app-header v-bind:title="title" v-on:changeTitle="updateTitle"></app-header>
Whenever I want to inspect some live data on a Vue instance in Chrome I have to click into the object in order to see any data because of how all the values have been converted to getters and setters.
This image contains an example of what I mean. I had clicked the name property of the object at index 0 of the array and only then could I see the value as being the string "Perpetual". It is incredibly annoying when I just want to see an overview of my data at a glance.
Here is an example of what I really want. As you can see, by using JSON.stringify inside of JSON.parse I removed the "observability" from the object and now it can easily be inspected at a glance in the console.
Obviously doing this every single time is even more of a hassle (and also not an options if my data has RegExp objects or other data which isn't JSON compatible) than clicking through the array and clicking object properties I want to compute, but hopefully it helps to show what I'm after.
Somebody please tell me there's a better way to do this. I just want Chrome Devtools to just automatically compute all the values of getters in objects I print to the console so I don't have to click through my data structures all the time in order to get a quick overview of the data.
Perhaps you are looking for the Vue Chrome Devtools extension which is awesome: https://github.com/vuejs/vue-devtools, https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en
It also features the vue component tree, editable data and props, events, time travel debugging and router support.
Disclaimer: I know this answer has already been asked, but in my case I need a solution for a specific case that is not really covered by other questions/answers.
In my react-native application, I do a lot of network requests that may take a long time to complete. Each request is handled in two main ways:
The request completed successfully. The global redux/flux state is updated and therefore the nested components are updated as well.
The request throws an error. A network error, a server error, a 400 error, whatever. In this case a message must be displayed to the user, in the form of a message that appears on the screen or as an alert.
My problem is that when a component is unmounted, the fetch callbacks are processed anyway when the request completes. In the first case, this is not a problem: the store is updated successfully and everyone is happy.
In the second case though, it is a problem because:
The alert would be displayed in a different screen, which is not correct and led to problems with the Modal component which I use to present error alerts.
The appearance/disappearance of the error message is controlled by the component LOCAL state, which can not be updated on an unmounted component and therefore throws an error.
What are my possibile solutions here? The most trivial one would be to use in each component a _isMounted property and in each fetch error handler, don't do anything if _isMounted == false. However, this approach is verbose and an antipattern.
Do I have any other option?
If you are using react-navigation I believe you could deduct the state in actions and not call the alert.
My suggestion is that you pass the navigation prop to action method and deduct the navigation state there and call the alert as you require.
I have a seaside application with a master-detail page. The master page has a table that consists of a list of tr records. When the user clicks a particular tr element, I want to call a detail component, which'll show the individual record's data.
Since I cannot make a tr element with callback or have it contain an anchor with a callback, I want the tr's onClick property to have some JavaScript which'll call: subcomponent . When I tried this, I got an error saying call: can only be used in callbacks and tasks.
Using ajax is a workaround, however it breaks the back button.
Edit:
More generally, I'd like to know how to set callback like behaviour for various JavaScript events.
Well, you cannot render a component in a tr element, but you could add some anchor or other element in one of its td children.
For my project I did roughly the following: I added an anchor to each row with a special css class, e.g. '.dblclick-action'. This anchor has a normal Seaside callback.
Then I bound a dblclick handler to the tr element that does something like document.location=$(this).find('.dblclick.ction').get(0).href;
I am not close to a Smalltalk image now to give you source code, but I hope you get the idea: you don't use Ajax to click the link in that particular row, but instead have the browser navigate to the callback that is associated to the link in that row. You could say you use the tr.'s dblclick handler to click the link and then let the normal Seaside stuff do its work. No magic there. You can find a little bit more info here.
If you don't want the anchor to be visible you may want to experiment with making the anchor invisible (display: none) or the like.
If you are a bit more experiment friendly, you can also try saving a callback on the server and render its url with callback id as an attribute of the tr element and use the dblclick handler to follow the link from that attribute you extract the value of an attribute in query using attr().
I forgot to answer your initial question: you cannot issue a call: from javascript. But you can use the document.location trick to re/misuse an existing link to a callback on the page using the technique I described in my first answer.