Vue JS v-用于不通过组件属性循环

Question

I have the following setup:

JS

var session = {
    content : {
        products : {
            options : {
                page : 1,
                productsPerPage : 20,
                orderBy : 'customPriority',
                orderDirection : 'asc'
            },
            productList : [
                    {name: 'a'},
                    {name: 'b'},
                    {name: 'c'},
                    {name: 'd'},
            ]
        }
    }
}


Vue.component('product-list', {
    props: {
        options: { type: Object },
        products : { type: Array, required: true }
    }
})

var app = new Vue({
    el: '#app',
    data: session
})

HTML

<div id="app">
  <product-list
        :options="content.products.options"
        :products="content.products.productList"
    >
    <div
      v-for="product in products"
    >
      <h1>
        {{product.name}}
      </h1>
    </div>
  </product-list>
</div>

(jsFiddle: https://jsfiddle.net/Lfw94bgz/1/ )

My problem is that the v-for directive seems to be not working, the products array is defined and shows up in vue-dev-tools, I've built this example seems to be doing the same (iterating thru an array passed to the compent via prop).

No errors/warning in the console, I'm quite lost, thanks for your help

Answer 1

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"