Conditional rendering

We need to modify the template section to add a section that is only displayed once a product is selected from the list:

<template>
  <div class="products">
    <h1>Products</h1>
    <div class="list"></div> <!-- product list omitted 
    for brevity -->
    <div v-if="selectedProduct" class="details">
      <h1>{{ selectedProduct.name }}</h1>
      <img :src="selectedProduct.thumbnail"  
      :alt="selectedProduct.name"  />
      <p>{{ selectedProduct.shortDescription }}</p>
      <p>{{ selectedProduct.description }}</p>
      <p>{{ selectedProduct.price }}</p>
    </div>
  </div>
</template>

 

With the addition of this div element, the select method now has a purpose. When the component is first rendered, the selectedProduct property is initialized as null which evaluates to false, and as such the section is not rendered. When the user clicks on an...