Javascript 将JS对象传递给组件Vue.JS

我无法通过产品组件显示产品

首先，在我的vue.js应用程序中，我通过ajax加载产品，如下所示：

var app = new Vue({
    el: '#app',
    data: {       
        products: [] // will be loaded via Ajax
    },
    mounted: function () {
        var self = this;
        ajaxGetProducts(0, self); // ajax, to fetch products
    },
    methods: {        
        getProducts: function (event) {
            let groupID = Number(document.getElementById("GroupSelect").value);
            ajaxGetProducts(groupID, this);            
        }
    }
});

//Ajax call to fetch Products
function ajaxGetProducts(groupID, self) {
    $.ajax({
        type: "POST",
        url: "/Data/GetProducts",
        data: { Id: groupID },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        dataType: "json"
        , success: function (response) {
            self.products = response; // Loading products into the App instance
        },
        error: function (jqXHR, textStatus, errorThrown) {
            self.products = [];
        }
    }).done(function () {

    });
}

然后我显示这些产品，它工作正常：

<!-- HTML -->
<div id="app">
    <div v-for="prod in products" >{{prod.Id}}</div>
</div>

最后，我想在HTML中使用它，如下所示：

<!-- HTML -->
<div id="app">
    <!-- need to pass prod object into product component -->
    <div v-for="prod in products" >            
        <product></product>
    </div>
</div>

我知道我必须以某种方式通过组件属性传递对象？ 将每个属性按1传递不是一个好主意，因为此产品可能会更改，因此属性名称可以更改，或添加更多。我认为应该有一种方法以某种方式将整个产品对象传递给产品组件，对吗？

将其作为

并且在组件中：

props:{product:{type:Object，required:true}

然后在组件模板中，您可以使用

{{{product.Id}}

将其作为

并且在组件中：

props:{product:{type:Object，required:true}

---

然后在组件模板中，您可以使用

{{product.Id}

之类的东西，您可以通过

道具将信息传递到组件中

像这样的东西

Vue.component('product', {
   props: ['item'],
   template: `<div>ProdID: {{item.Id}} {{item.Qty}}</div>`
})

<div id="app">
   <div v-for="prod in products" :key='prod.Id'>            
       <product :item='prod'></product>
   </div>
</div>

Vue.component（'product'{
道具：['item']，
模板：`ProdID:{{item.Id}}{{item.Qty}}`
})

像这样传下去

Vue.component('product', {
   props: ['item'],
   template: `<div>ProdID: {{item.Id}} {{item.Qty}}</div>`
})

<div id="app">
   <div v-for="prod in products" :key='prod.Id'>            
       <product :item='prod'></product>
   </div>
</div>

您可以通过
道具将信息传递到组件中

像这样的东西

Vue.component('product', {
   props: ['item'],
   template: `<div>ProdID: {{item.Id}} {{item.Qty}}</div>`
})

<div id="app">
   <div v-for="prod in products" :key='prod.Id'>            
       <product :item='prod'></product>
   </div>
</div>

Vue.component（'product'{
道具：['item']，
模板：`ProdID:{{item.Id}}{{item.Qty}}`
})

像这样传下去

Vue.component('product', {
   props: ['item'],
   template: `<div>ProdID: {{item.Id}} {{item.Qty}}</div>`
})

<div id="app">
   <div v-for="prod in products" :key='prod.Id'>            
       <product :item='prod'></product>
   </div>
</div>


我尝试了一下，发现了一个引用错误：您缺少产品：）我尝试了一下，发现了一个引用错误：您缺少产品：）的引用