Javascript 将数据从v-for解析到方法中会导致未定义的错误

我已经通过props将一组数据对象发送到子组件中，然后运行v-for，它以我想要的方式打印元素，如下所示

 <div class="col-md-3" v-for="product in products" :key="product.id" v-if="product.id <= 8" >
    <div>{{ product.name }}</div>
    <button @click="buyProduct">
</div>

但是我的控制台给了我“TypeError:无法读取未定义的属性'id'”

---

有什么想法或建议吗？由于我想获得这些产品的值，我点击了我假设这是抛出错误的行：

orderId:this.product.id，

您可能从未设置过

this.product

，更好的方法是使用单击的产品作为参数调用

buyProduct

方法：

<button @click="buyProduct(product)">buy me</button>

另外，不要在模板中组合

v-for

和

v-if

（您可能已经收到了相关警告），如果您确实想进一步过滤传递的

产品，请使用
computed
属性：

computed: {
   filteredProducts() {
       return this.products.filter(p => p.id <= 8)
   }
}

计算：{
filteredProducts（）{
返回此.products.filter（p=>p.id你能解释一下你的模板中的
g
是什么吗？你也能分享你的
数据
内容吗？非常感谢你，是的，我知道这个警告我会调查的谢谢你TommyF先生TommyF先生，你能检查一下这个问题吗，我有点卡住了，觉得它很愚蠢
buyProduct(product) {
    ...
    orderId: product.id
    ...
}

computed: {
   filteredProducts() {
       return this.products.filter(p => p.id <= 8)
   }
}