I have the choice to make http request from a parent or a child component.
What are the best practices? axios/ajax request from parent and pass result to children components, or directly from children components?
At least in my opinion I think the best you can do is build children components as simple as posible for reusability, I mean, imagine that you have a component named "Newsfeed" that show a lot of random stuff, you can use it in a main page for a social media website and for the profile page from someone like Facebook does, the only difference will be at the moment of fetch the data, they will not be the same but the component does, if you explicity make the component fetch the data it will not be reusable
I'm not a Senior or something like that but in my short experience I can say that.
First of all, Axios still makes use of Ajax.
More so, it depends on where and how the content being fetched would be needed.
If the content is going to be needed by other components in the same parent component or would be used by the parent component itself, then make your query in your parent component.
Else, your child component should handle its own queries and processes.
In simple terms, many things come into consideration when making such decisions. a more detailed explanation could help me figure out a better suggestion.
Related
In the app I'm working on it's a fairly big codebase and components/pages are sometimes based on user roles. Admins will be able to see certain buttons or sections while regular users are not.
I need to modify a lot of the existing pages/components to accommodate a new role that's being added, which is view-only-admin.
This role will only be able to see everything including calendars, tasks, etc. but they are not allowed to make any sort of updates.
It would be a tremendous amount of work to go through the template of each component and file and look for v-if admin and also add a view-only-admin as well as make every single button or submit/click method behave differently for a view-only-admin role.
What would be the best way to handle this for the entire app? Re-writing and modifying v-if and submit methods seem like a bad use of time.
I've only been working with Vue/Nuxt for a few months, but I have read Mixins are pieces of code that you can reuse.
Would it be possible to write a mixin so that if the role is "view-only-admin" and there's an action that is a put/Post call, then they are not able to perform those API calls and presented with an error message?
I'm not sure how to go about properly implementing this feature. If I am able to stop all PUT/POST calls using a mixin, it would just redirect to a 404 right?
Thoughts?
If you are using axios for POST/PUT methods, then you should definitely check Interceptors.
But if you add only an interceptors without UI updates - your users may be confused why some buttons exist but doesn't work as expected.
I'm trying to model a windows-explorer-like filesystem with Vue Router. It will have folders, which can have child folders, and/or child items.
Ideally, I would like to use route params to accomplish this, as in:
/projectId/:projectId/items/:folderId/:childFolderId/:childFolderId/.../item/:itemId
Where there could be n-number of :childFolderIds. If I could access these :folderId params as an array, it would be very simple to set up breadcrumbs correctly, which I think is a key part of this.
Is this possible with vue-router? I've run into limitations on requiring unique, named params.
Thank you.
I wanted to make add and edit operation for an entity suppose Post. There are same fields on both add/edit form. So I wanted to ask can I make the form as a separate component and use it in add.vue and edit.vue? Is it the best way to do that kind of thing in VueJS?
I am asking this because I had visited a lot of codes on the internet where the authors didn't follow that approach and they are making separate forms for add/edit.
Sure you can use same component for both operations.
You just need to handle data flow (call correct api / graphql mutation / form action)
if you have a form that most of its components are not the same use it in Form.vue and add.vue edit.vue create a base component if it`s reusable
make sure to control the data correctly/state.
You should use one component, as you dont want to duplicate code. It's crucial to pass the id of the entity. If the backend receives the entity without the ID then it know it's the add operation (perform an INSERT in a DB). If the ID is set then the backend knows it has to update.
this question is coming from me getting a rather big $ bill surprise with the Javascript Google Maps API.
Essentially, I launched our Real Estate based web app, ran some ads, got some traffic, which resulted in a much larger bill than expected. One of the reasons the bill was higher than expected was due to the maps API was hit an obscene amount of times, especially compared to traffic.
I'm using Vue routers.
Now, I have a route called /listings, on said route there is a map, (using vue2-google-maps), as well as a list view.
Hypotheses, every time a user hits /listings, the components/page get's rendered and a dynamic map request is sent? Meaning a single user can easily send off 10, 20, 100+ Gmap API requests just by navigating to different listings, then navigating back to the map search. Can anyone confirm?
Now I am thinking about solutions already that would make use of a dialog, and v-if when a listing is selected it appears overtop, essentially never navigating away from the /listings page.
However, am I correct in my assumption? And if so, is there a better way to solve this?
Used <keep-alive> around the <router-view> and worked!
I have a rather big form which I post to an API backend. The form has about 17-20 fields, depending on the status of a checkbox.
My plan is that after the user fills out the form I will validate it using Vuelidate and then display a summary of the data to give the user the possibility of reviewing their data. After the user reviews the data and considers that is correct, it posts the form to the backend API.
To do this, I plan on using Vuex to store the form object, and use the store to display the fields in the form and also on the summary page.
Is this a good approach, to store the form object in Vuex? If so, where I define the validation rules in store.js?
Thank you very much for your feedback!
You don't really need Vuex for this.
You can keep your form validation rules in your component itself. If you have something of a form builder or a different component that takes care of your form, you can keep your validation rules there or accept the entire form model through prop from the Component where you want to use the form.
Once the submission is done, you can pass the data to your Summary page via route itself. Check this out - https://router.vuejs.org/guide/essentials/passing-props.html
Whenever you think about Vuex or any state management solution think about the lifecycle of that data. How long is it needed to persist. In most cases, you'll find that it belongs to one view or two.
Vuex is good for cases where you need a piece of data to persist for way longer, possibly entire duration of the app. Example - User Details, Theme Settings, Experience Configuration etc.
Let me know how it goes.