A very cool feature from Vue is that you can split your code into components. In this part of the tutorial, we will turn the .card-image and .media elements into two separate components. We can start with the .card-image by added this code to the top of our <script> tag.
As you can see this makes the code for the card more readable. The new card-image component is also reusable, so you can include it where ever you want. Next, we'll add the necessary JS code to our script tag.
If you open index.html in your browser now everything should look just the same as it did before :-)
We'll go right over to the component for the .media element. Replace the <div class="media"> with this code:
What we did now was the we replace the whole <div class="media"> block with just
a simple one-liner. We also bind the variable name to a attribute (props) so that we
can display this inside the component.
Again we need to add the JS code where we create the actual component:
It's not much new here from the other component. We created a component named "media" and allows the parent to send a property to it called "name".
When you're building components it's important to know that inside the back ticks that holds the components HTML that you can only have one root element. So wrap everything inside the components inside a div or similar.
A component does not have to be very advanced. So in this challenge I want you to turn the number_of_interests with it's surrounding <b></b> tag into a component and show it in the same place where it belongs. This will not be a part of the course so when you're finished you can just remove it.