V-if hiding everything on page


When I add the v-if"inStock", everything goes away. How can I fix this? (Code is from the Vuemastery course)

<!DOCTYPE html>
		<title>Product App</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<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="https://cdn.jsdelivr.net/npm/vue"></script>
		<script src="main.js" ></script>
var app = new Vue({
	el: '#app',
	data: {
		product: 'Socks',
		image: './assests/green.jpeg'
		inStock: true


Here is the Jsfiddle, Everything works fine.

There is typo in here. Hopefully it is not in your code.
It Should be

data: {
		product: 'Socks',
		image: './assets/green.jpeg',
		inStock: true


Also ‘assests’ should be spelled ‘assets’


Werid… could it have something to do with me running it on localhost?


Absolutely no. It Should work.


Wait, I refreshed it again. Now it says:

{{ product }}

In Stock

Out of stock

And the image is just a gray line.


In the head fine? Where I linked my stylesheet?


Nothing changed.


Yes Exactly you should it there.


It didn’t work.


Can you create Jsfiddle, So that I can see what exactly you are doing.


Here: https://jsfiddle.net/qdrL0gce/


I updated your Jsfiddle, can you check now.


Thank you. I am on my phone now, so I cant really see. What did I do wrong?

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


Oh, okay. I must if accidentally deleted it. (I am new to Vue and JD.) Thank you.


I got home, I put the new stuff in, and the same thing is happening. I put in into JSFiddle, and it worked fine.


If you have an error in your code, you should see an error in your devtools console.


Like @JamesThomson said can you check your console and tell us what error you get If there are any.


Okay. But everything is working fine on JSFiddle.