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.
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 have a project for which I use VueJS (2.x) for the frontend part.
I've made a component to do some filtering :
And I'd like to be able to change the URL according to the filters, so that I can share the URL and another user would land on the same search. At the stage of my screenshot, the URL should look like : my/long/url?username=test&email=#test. But I don't know how to achieve it.
Currently, when I add/remove a filter, I create a new URLSearchParams object that I commit to the vuex store and with a watch statement I query my backend again with the updated filters.
The thing is that my URL doesn't change, of course, because I do not pass by a this.$router.push(...) or whatever.
Maybe I started it wrong.
What is the good way of achieving this ? Knowing that routing to the same view with a new query part does trigger the error DuplicateNavigation...
Thanks in advance for your help :)
I had achieved something similar to this by using the history.pushState
This basically allows you to modify your URL even if you are not using $router.push
You can follow the URL for more details
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
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.
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.
Thank you for answering my previous questions and I appreciate the effort put in by you in developing Moqui.
In the field tag there is an attribute of validate-parameter so could please elaborate the use of it and how to use that attribute. Thanks in advance :-)
To be specific, it sounds like you are looking at the XML Form field element (form-list.field, form-single.field).
A form field can be validated based on the validation settings in a service parameter (there are many validation options there) or an entity field (just a couple validation options there). This is done automatically when a form submits to a transition that has a single service-call element (i.e. not an actions element), and these attributes are populated automatically. You can also specify manually which service/parameter or entity/field to use for validation.
This is all part of the support in the framework to do client side validation with JavaScript using server-side validation settings. Note that the validations are also done on the server, but you don't have to define/implement them twice.