V-if hiding everything on page


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


Can you try this code.

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

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

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

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

   <script src="main.js"></script>

And in your main.js

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


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 .


In this article:

It stated that “In JavaScript, an object is a standalone entity, with properties and type”. Meaning, when you declare an object it should have its corresponding property and type (i.e. name/value pairs) . And when you declare multiple properties in an object it should be separated with a comma. Just like declaring multiple variables in a single var (e.g. var obj1,obj2,obj3).

In Vue, ‘data{}’ is an object, and this is also where we declare our properties.
Since you forgot to put a comma after your declare the “image” property:

 product: 'Socks',
 image: './assests/green.jpeg'
 inStock: true,

This will definitely throw an error which causes “everything goes away”.
So make sure you won’t repeat this mistake.