Toggle components based on prop value in main Vue instance

Question

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>

I don't think you should pulling something from child component to parent. "All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around." vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow. Maybe consider to use the event bus. — Paolo
@Matt , probably, that's the problem. You can store hotels in an array in a parent component, filter an array in a computed property and use filtered array to render children in a loop. — Sui Dream

khofaai khofaai · Accepted Answer · 2018-08-17T06:44:10

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

Toggle components based on prop value in main Vue instance

1 Answers