如何遍历VueJs方法中的数据数组

Question

所以我有一个名为 products 的数据数组，我将它传递给 props 中的组件，然后使用 v-for 命令在该组件内显示它，当我单击一个按钮时，它采用该顺序并将其推入另一个称为订单的数组中；现在我希望只有在它没有被推动的情况下才能推动它，否则只是增加数量 这是我的帮助代码：

<template>
  <div v-for="product in products">{{ product.name }}</div>
</template>

我想说的是如果product.id = order.id 不推送其他数量++；

props: {
  products: Array,
 orders: Array,
 }
 methods: {

   for(let i=0; i<this.orders.length; i++){
        if(product.id != this.orders[i].id || this.orders.length == 0){
           console.log('sure what the hell');
          console.log(this.orders[i].id);
          this.orders.push(product);

        } else {
          console.log('baught it before');
          console.log(this.orders[i].id);
        }
      }
      

我尝试过，但它一直给我不确定 我认为它正在工作，但它需要一个初始推送，因为它一直说订单的长度为零，所以没有推送任何内容，当我在 if 语句之外启用推送时，它会使推送加倍

Answer 1

请了解如何提供一个最小的可重现示例：https://stackoverflow.com/help/minimal-reproducible-example
最好提供一个 jsfiddle 或代码框来展示您的问题。

您不应该更改作为 prop 传入的内容（阅读“单向流程”）。

要么将您的 orders 数组作为当前组件中的本地数据对象，要么将 $emit 来自此组件的 addToCart 事件，并通过侦听此事件来处理实际添加到父级中的购物车。

假设您的 orders 在本地数据对象中：

data() {
   return {
     orders: [
       { id: 'exists', quantity: 1 }
     ]
   }
},
methods: {
  addToCart(product) {
     let exists = this.orders.find(p => p.id == product.id)
     if(exists == -1) { // doesn't exists yet
       this.orders.push(product)
     } else {
       this.orders[exists].quantity++
     }
  }
}

Answer 2

检查订单中的值，如果返回的数组长度大于 0，则表示产品已添加，否则产品不存在。

<template>
      <div v-for="(product,index) in products" :key="index">
       <div>Name : {{ product.name }} </div>
      </div>
      <button @click="handleAdd({id:20})">Add</button>
    </template>
    
    
    props: {
      products: Array,
     orders: Array,
     }
     methods: {
       handleAdd(product){
        
          const check = this.orders.filter(item => item.id === product.id) 
          
          if(check.length === 0){
            orders.push(product)
          } else {
           // other thing
           }
        
      }
     }