vue.js no data rendering

Question

I'm trying to go through a basic vue tutorial. Recently I must have changed something that is stopping anything in the vue.js from rendering on my page and I can't seem to find out why. Example: instead of displaying the value of data.product, it displays {{ Product }}. Thanks in advance for any help!
Here's a link to the project repo on gitlab: project link

Hey there! I think you could improve this question by trying to provide any error messages from the dev tools, and maybe setup a codepen or something similar! — Evan Bechtol
– Evan Bechtol, Commented Mar 2, 2019 at 5:31

Jns · Accepted Answer · 2019-03-02 09:03:24Z

1

I'm quite sure you will see an Uncaught ReferenceError if you open the DevTools of your browser. Because in your main.js file you reference two times to non-existent variables. In your variants-array you are using Green and Blue for your variantColor as variables but non of them is defined. From context I guess you just want to display these two values as string at your page, so you have to assign a string to your variantColor variable by adding single or double quotes.

Inside your main.js change your variant array to this:

...
variants: [
 {
   variantId: 2234,
   variantColor: 'Green'
 },
 {
   variantId: 2235,
   variantColor: 'Blue'
 }
]
...

answered Mar 2, 2019 at 9:03

Jns

3,2871 gold badge20 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue.js no data rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related