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.
Related
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.
I am looking to dynamically display a razor page based on some condition. Specifically, I intend to have a parent page model and have that dynamically invoke a child page model based on some condition. My current folder structure looks like this
Parent
Child a
Child b
Child c
So depending on the condition, Child a or Child b or Child c should be invoked and it's corresponding page should be displayed to the user. I thought about overriding the parent's OnPageHandlerSelectionAsync, however I'm not quite sure how that can be achieved as I'm quite new to .Net Core.
What is the most efficient way to solve this problem?
I'm confused about best practices for passing data from parent to child components and modularity strategies.
As I know there are 2 ways:
Fetching data in parent component and send Array/object to the child via props
Send parent_id to the child via props and fetching data within the child component
Let's assume a use case working with a product edit view, having:
A parent component product
A child form component to edit basic product information
A child related_products component where other products can be linked/unlinked.
As per my experience, the first way works smoothly since it's all done in 1 request to the API: fetching a product object in parent component and passing through props the product itself to the form component and the nested objects to the related_products component. In addition, it can be done in beforeRouteEnter guard so the parent and all its children are shown with all the information at once. The cons I see here is that we have to send the correct object structure to the child component to avoid any error, having a strong dependency between components.
On the other hand, by sending the parent_id to every child component through props we release the parent from any logic. In this case, every child component acts as a "black box" and fetch/handles the information. The cons I see here is that we would have to perform 2 API requests for getting the product and the related products. In addition, the beforeRouteEnter is not viable at all, so we get an empty form/table until the data is retrieved.
This is not about how to code it, it's just about what's the best implementation as per your experience.
As far as my experience is concerned, 1-st way is better. Parent component acts as "smart" and you have access to it's life cycle hooks in order to trigger your api-requests, reset timers, e.t.c... I would also suggest to use vuex, as it allows you to make clean interface of communication between your parent component and "outer world", utilizing actions and getters.
With that being said, your "dumb" child component communicates with it's parent through props and emits interface. And because it is "dumb" - it's easier to test it or utilize something like "storybook".
we have to send the correct object structure to the child component to avoid any error
I guess, at the end of the day, you'll need correct object structure anyway, right? It could not be just random...
My component is pretty big so I will give you simplified example, maybe someone will know how to solve my problem.
I have invoice component with children components like 'subtotal', 'vat_subtotal', 'total' (it's example). I'm using v-ref to get direct access to every child from invoice component. Also, subtotal is calculated from invoice properties, then vat_subtotal is calculated from subtotal children properties. And 'total' is calculated from vat_subtotal children.
Example:
invoice.$refs.subtotal.total = {some calculations}
vat_subtotal.total = #$parent.$refs.subtotal.total * 1.21
total.total = #$parent.$refs.vat_subtotal.total
The problem is that i'm getting warnings when page loads, be cause 'total' children is trying to access 'vat_total' children properties, but #$parent.$refs.vat_total is still 'undefined' (I don't know why. When later im changing something in form, it reacts normaly and recalculate everything right). It seems, that one children is trying to compute properties while other children isn't loaded yet.
Don't reach into a child for data. If the parent needs access (in your case, to give access to another child), the data item should be created in the parent and passed as a prop to the child. That is how data can be shared among multiple children. Child components should not depend on other child components being available through the parent (or on anything in the parent, really, if it isn't passed in as a prop).
If the child component is responsible for changing the prop value, you can pass it using .sync.
The way you are trying to solve things is technically possible but highly discouraged. As stated in the docs:
Although it’s possible to access any instance in the parent chain, you should avoid directly relying on parent data in a child component and prefer passing data down explicitly using props. In addition, it is a very bad idea to mutate parent state from a child component, because:
It makes the parent and child tightly coupled;
It makes the parent state much harder to reason about when looking at it alone, because its state may be modified by any child! Ideally, only a component itself should be allowed to modify its own state.
In general, you should aim for creating a model representing the state of your application. Instead of accessing parents / children directly, pass any relevant data down to children using props. Children can notify their parent about changes using events, or you can use .sync binding to synchronize models automatically.
I think that you would benefit from reading about more structured approach to Vue application architecture. I'd start with Flux-inspired Application Architecture for Vue.js.
Using this http://wwwendt.de/tech/dynatree/
I know the answer is probably no, but I want to verify this: can a node have several parents in this component?
That would mean, that nodes with identical properties (title, icon, and other attributes) appear at different locations in the tree.
This is possible, of course.
The only restriction is: It's not allowed to have two nodes with the same key property in one tree.
I think that the behaviour would be hard to define, if nodes where really 'identical'. For example, when you activate one node that has multiple parents, would you expect all instances to be highlighted? And then, when you press [Cursor-Left]: which parent should be navigated to?
But you could add a new property like myBackendKey whith the same value for all node instances.
Yes, a node in DynaTree can have multiple parents. That is: one identical node can be assigned to more than one parent node in the same tree. I am using jQuery Dynatree Plugin v1.2.2.
I've just now encountered a situation where I've had to deal with duplicate nodes in conjunction with navigating from current node to its next/prev sibling.
Since I had dublicate nodes in the tree, the navigation was broken. When querying the tree for a node with key "abc", dynatree will give you only the first occourance of the node with that key (and not care about the remaining nodes with the same key).
Solution: To prevent this from happening, I've simply prefixed the key for duplicate nodes with a unique string.