The plan component is handy, but if we want to display the plans in another place of our application, we would have to copy this div and make sure that the root component instance has the plans array in its data. We can make the list of plans more reusable by creating a dedicated component. Let's call it plan picker. that we will be able to use in any place we want.
Like this. We already know how the template of the plan picker should look. It's this div. So, let's create the template before we code the actual component.
I will give it an ID of plan, picker, template, and paste the old markup inside. Notice here, that we can use the planned component inside of another component's template. Okay, cool. Let's create the plan picker.
I will assign it its template and then move the plans data into the component so that it can have access to them in its template. Another approach would be to use a prop to pass the plans from the root instance into the plan picker component. I like to have them in the data though here so that the component is independent. If we refresh the page now, we still get the list of plans.
But, now we can use the plan picker component wherever we want to display our list. The plan component is handy, but if we want to display the plans in another place of our application, we would have to copy this div and make sure that the root component instance has the plans array in its data. We can make the list of plans more reusable by creating a dedicated component. Let's call it plan picker.
that we will be able to use in any place we want. Like this. We already know how the template of the plan picker should look. It's this div.
So, let's create the template before we code the actual component. I will give it an ID of plan, picker, template, and paste the old markup inside. Notice here, that we can use the planned component inside of another component's template. Okay, cool.
Let's create the plan picker. I will assign it its template and then move the plans data into the component so that it can have access to them in its template. Another approach would be to use a prop to pass the plans from the root instance into the plan picker component. I like to have them in the data though here so that the component is independent.
If we refresh the page now, we still get the list of plans. But, now we can use the plan picker component wherever we want to display our list.