I want to achieve 2 tasks through validation in Quasar.
Firstly, I have a parent component that contains a few child components. The user is allowed to create another set of child components under the same parent components to add more data. If a user creates a new set of child components, I now have 2 different items array.
I want to achieve the following:
Validate each item according to a certain rule
Send the validation results to the parent component so that it displays a 'check icon' if all the child components are filled correctly or a 'negative icon' if any of them are invalid.
I am able to validate each item of the child component individually but I am not able to collect the validations and pass the status to the parent component.
Related
When we configure the validation for child data model from parent data model using validation tab and then its not working in latest version ( 9.21.2), but it was working in old version like 9.10.0
I have created two entity such as Parent and Child.
I have related the Parent and child using Many to many relationship.
Parent Entity with Many to many relationship with child:
Child Entity:
In parent, we child field (many to many field), and then there is a validation tab in which i have configure the validation for field in child, but its not working.
In following screenshot, you can see that i'm able to create child with empty title
Note: I dont want to configure the validation in Child data modal because i planned to create multiple relationship field with same Child data modal, so each time, i will use different validation rules, so Parent is the better place to configure it.
i'm using vue.js and vuetify.
elements made by parent element exist in my code.
i want to change parent element's class dynamically depending on it's child class, like jQuery has() method.
is vue.js has any way to do this?
jQuery has()
You can access a state if a child property of a child on different ways. (I assume the child class is set based on a certain state).
You could use vuex that keep a state over several components. You could emit a state back to you parent component. Or you could use the ref to access the child components properties.
<component ref="childcomponent"></markdown>
process: function(){
// items is defined object inside data() of the child component
var hasClass= this.$refs.childcomponent.item
}
I have parent component that contains form component and detail component for created_at and updated_at in editing Product page.
Form is to edit the existing data and detail component will be next to the form.
I didn't have the detail component before so I fetch data from form component and use it in the component however I need some of the data in detail component which is the child of the parent of the form component.
So I moved the fetch axios to parent component and pass the data to both children now.
Is it better to do this way or is it better to send axios request both in form component and detail component?
The form is also used in adding new product.
My opinion is that you should fire requests from most top level possible. This way your children components (building blocks) can work independently from your current context. It's called presentational component and it's role is to output some markup. The container component feeds the data to the presentational component making the data flow go from top to the bottom nicely.
So in short, you did it right! However you should be careful, when your data changes in the edit form, then you probably want to fire the request on parent again, so that the data is updated for the whole app. This kind of flow is highly facilitated by Vuex. It serves as single source of truth (data) that your whole application can rely on.
I have a form built with Vue with a hierarchy of components using v-model to bind the data to the model.
Now I want to fill the form programmatically. If I just update the model (data) of the top component, it has no effect on the child components since this only changes their props.
Here's an example:
https://jsfiddle.net/eywraw8t/411545/
When you click the 'Set to 2018-Oct' button, the model on the myApp is updated, but not the model of the <mydate> component.
Is there a way to achieve filling the form without adding watchers to value props (which the official guide doesn't suggest) on all components in the hierarchy?
I wonder whats the best practice to fetch data between rotues.
I have parent route, which contains a list of items, and child route which renders when selecting an item from the list.
By entering the main route, I fetch the list from vuex store.
By entering the child route, I look for the proper item inside the items list.
The issue is, that the list isnt fetch before the child route is rendered.
Whats the best way to load the parent's data before the child?
Thanks.