[Vuejs]-Vue js v-for not looping thru component property

0👍

I played around with it a bit and got it working. Here is a working fork of your project. The changes I made are in the HTML section, where the <div id="listTemplate"> is, and I added template: '#listTemplate' to the product-list component declaration

I think you just have a little bit of a misunderstanding about what a Vue component is. A Vue component is a reusable set of JavaScript and HTML code that you can simply inject into anywhere you want. You need to define what a component looks like inside a template, and THEN you can just simply say <product-list></product-list> from within your App Vue instance.

What the template does is just define what HTML code is going to be placed wherever the component tags are. For your example, think of <product-list></product-list> as just saying “copy and paste the contents of <div id="listTemplate"> right here”

Leave a comment