V-if hiding everything on page


#22

There are no errors. And the VueJS Chrome plugin says there is no Vue detected.


#23

Can you try this code.

// product.html
<!DOCTYPE html>
<html>
  <head>
    <title>Product App</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div class="nav-bar"></div>

    <div id="app">
      <div class="product">

        <div class="product-image">
          <img :src="image">
        </div>

        <div class="product-info">
          <h1>{{ product }}</h1>
          <p v-if="inStock">In Stock</p>
          <p v-else>Out of stock</p>
        </div>

      </div>
    </div>
   <script src="main.js"></script>
  </body>
</html>

And in your main.js

var app = new Vue({
  el: '#app',
  data: {
     product: 'Socks',
     image: './assests/green.jpeg',
     inStock: true,
   }
})

#24

your code has some mistake in you data content,so inStock is not defined in you page,and v- if will make components show when inStock is true rather than it is undefined or ohther .