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?
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 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 was hoping I could get some feedback on something I'm working on. I'm building an application that is essentially a bunch of data tables. Part of my requirement is not to use any additional frameworks (vuetify) or any type of store (vuex).
Currently, my application is constructed as follows:
API call upon creation of app
That data get's passed into a component where I would like to do all my searching/filtering
From there the next component is built specifically for Pagination
Then to the component that builds the data tables.
My question is, since I have this top down approach, how do I build both the search and filter functionality to where I don't have to pass anything back up to the parent components?
I am using scoped slots to pass/inject data into child components. My first thought was that I would have a computed property that returns an array in the control component and then pass that down to the pagination component, which works, but how do I also use that same array if I want to be able to filter results and also search filtered and none filtered items? Essentially to be able to mock the functionality of some of the Vuetify tables.
I assume you don't want to pass data/prop-drill between 3 component layers?
You can use provide/inject.
You can provide a "setArrayData" method to the child components (2 and 3 levels deep) and also provide "arrayData" data property.
You can also an event bus (see vue docs). In Vue 2 an event bus is built in, in Vue 3 it's not.
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.
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.