Question

我有以下设置：

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/）

我的问题是v-for指令似乎不起作用，产品数组已定义并显示在vue-dev-tools中，我已经构建this example似乎也在做同样的事情（通过道具传递给竞争者的数组迭代）。

控制台中没有错误/警告，感谢您的帮助，我很遗失

Answer 1

我玩了一下它并让它运转起来。 Here is a working fork of your project。我所做的更改位于<div id="listTemplate">所在的HTML部分，我将template: '#listTemplate'添加到产品列表组件声明中

我认为你对Vue组件的含义有一点误解。 Vue组件是一组可重复使用的JavaScript和HTML代码，您只需将其注入任何您想要的地方即可。您需要在模板中定义组件的外观，然后您只需在App Vue实例中说出<product-list></product-list>即可。

模板的作用是定义在组件标记所在的位置放置HTML代码。对于您的示例，请将<product-list></product-list>视为只是说＆＃34;在此处复制并粘贴<div id="listTemplate">的内容＆＃34;

Vue js v-for不循环通过组件属性

1 个答案: