V-if hiding everything on page


#1

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

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

#2

Here is the Jsfiddle, Everything works fine.
https://jsfiddle.net/vishnutm/yg4usLqb/49/

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

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

#3

Also ‘assests’ should be spelled ‘assets’


#4

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


#5

Absolutely no. It Should work.


#6

Wait, I refreshed it again. Now it says:

{{ product }}

In Stock

Out of stock

And the image is just a gray line.


#8

In the head fine? Where I linked my stylesheet?


#9

Nothing changed.


#10

Yes Exactly you should it there.


#11

It didn’t work.


#12

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


#13

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


#14

I updated your Jsfiddle, can you check now.
https://jsfiddle.net/vishnutm/qdrL0gce/1/


#15

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


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

#17

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


#18

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


#19

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


#20

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


#21

Okay. But everything is working fine on JSFiddle.