I'm designing a page that returns a bunch of different hotels using one hotel component. Each hotel passes in unique values to the component such as name, star rating, hotel facilities etc.
On the main page in the Vue instance I need some basic filters that toggle each component true/false based on it's own prop value. I don't know how to go about pulling the prop value out of the hotel component into the main Vue instance and running a method on it?
As this is a small app, I'm using the CDN for ease of use.
Component example below.
<hotels
hoteltitle="Ryans"
hoteldesc="This hotel is situated on the popular waterfront with sweeping views
overlooking the marina."
loc="Ibiza"
star="4"
beachfront="true"
family="false"
gym="true"
pool="true"
single="true"
spa ="false"
hotelurl="/url.html"
price="74"
url="index2.html"
accomCode="30030"
></hotels>
If you want to emit data from child component to parent component you can use the $emit function. Check officiel doc.
Check this codepen example
Related
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 two Vue.js parent components.
In one component, it shows available names list which are its child components and in other it shows already selected names list.
What I want to do is that when I click on an available name, it should hide from that component and show it in the other component. And the same if I remove from a selected it should appear in available list.
But these two components are completely unrelated. How can I do this?
Option 1
Create a vuex store:
https://vuex.vuejs.org/guide/
This will allow you to share information between components.
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application
Options 2
Use something called an event bus:
https://blog.logrocket.com/using-event-bus-in-vue-js-to-pass-data-between-components/
With this method you can create events in one component and catch them in another component and they don't have to have a parent/child relationship.
Which option to go for depends on your preference and you will have to determine which is best suited for you.
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...
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 layout file in which I have some data. Besides that I have three components:
tags
students
actions
I want to declare the data in the layout file, but access it through the three child-components.
How is this done in Vue.js?
Thank you for your help.
One option can be to pass the props to all the child components which is the norm in vue when it comes to passing data to child component, as also explained here.
Given that you want to pass same data to all these components and there can be cases going forward when you want to change this data and get it reflected in parent as well, you can go for a centralised state management, which is explained here in more detail.