Vue js数组反向导致v-for循环出错

Posted 2023-02-22

【中文标题】Vue js数组反向导致v-for循环出错

【英文标题】：Vue js array reverse causing error in v-for loop

【发布时间】：2021-04-27 09:03:18

【问题描述】：

我试图使数组反转，但它抛出如下所示的错误

in promise) 错误：超出最大递归更新。这意味着您有一个反应性效果，它正在改变它自己的依赖关系，从而递归地触发它自己。可能的来源包括组件模板、渲染函数、更新的钩子或观察者源函数。

我在 google 上搜索并找到了 array.slice.reverse() 而不是直接的 array.reverse()。 它工作正常，但我希望索引号与原始数组相同。有没有办法直接反转数组

<template
              v-for="services in customerReceipt.invoiceServices
                .slice()
                .reverse()"
              :key="services"
            >
              <tr
                class="service_row_cls"
                :class=" expressReceipt: services.express == 'express' "
              >
                <td>
                  <Button
                    :label="parseString(services.qty)"
                    @click="adjustServiceQty(services, services.id)"
                    class="p-button-success p-pl-2 p-pr-2 p-pt-0 p-pb-0"
                  />
                </td>
</tr>
</template>

    adjustServiceQty(service, serviceIndex) 
        this.checkTxn.getServicesCoupon(service.serviceId).then((data) => 
          const d = this.camelizeKeys(data);
          this.couponList = d.serviceCoupons;
          this.fixedExpressToday = Number(d.expressAmount);
        );
    
        this.serviceDialog = true;
        this.serviceIndex = serviceIndex;
        this.itemQty = service.qty;
        this.serviceDesc = service.description;
        this.serviceExpressDate = service.dueDate;
        this.serviceExpressTime = service.dueTime;
        this.discountId = service.discountId;
        this.express = service.express;
      

//HERE I AM CALLING THE BELOW FUNCTION AFTER UPDATING THE QUATITY FROM DIALOG.
//I AM DOING THIS USING FOREACH LOOP WHICH IS SCANING THE ENTIRE ARRAY.
// I JUST WANT TO UPDATE THE QTY USING ARRAY INDEX

    closeServicePopup(params) 
        console.log(params);
        if (params[0] == "Done") 
          this.receiptServices.forEach((e) => 
            if (Number(e.id) == this.serviceIndex) 
              e.express = params[5];
    
              if (params[5] == "express") 
                e.dueDate = params[4];
                e.dueTime = params[3];
               else 
                e.dueDate = "";
                e.dueTime = "";
              
    
             e.description = params[2];
             e.expressAmt = 15;
             e.discountId = params[6];
             e.discountMethod = params[8];
             e.discountName = params[7];
             e.discount = Number(params[9]);
             e.qty = Number(params[1]);
            
          );
         else if (params[0] == "Cancel") 
          this.toast.showSuccess("Service adjustment cancelled successfully");
        
    
        this.serviceDialog = false;
      

【参考方案1】：

你需要遵循这个模式：action (click) -> state change (change qty) -> re-render (automatic)，同样的模式使用Vuex库。

在状态改变中你可以做所有的魔法。

注意：reverse 方法反转原始数组，不返回具有反转值的新数组。

如果你想在反向数组中获取项目的索引，那么试试下面的代码：

const reversedIdx = (array, idx) => array.length - 1 - idx

const a = [10, 11, 12, 13, 14]
const b = Array.from(a).reverse()

const a_someIdx = 1 // index of value 11
const b_sameItem = b[reversedIdx(b, a_someIdx)] // 11

console.log(b_sameItem) // 11

【讨论】：

是的，我做了同样的事情，但我想要相同的索引号，因为我正在原始数组中进行编辑。与 array.slice().reverse() 做工作，但使索引号不同

提供代码！我不知道你想做什么，我会帮助你......

好的，向您展示代码我的问题是我需要使用索引更新数组并希望以相反的顺序显示数组列表。

点击adjustServiceQty函数时我想更新数组索引的数量。现在我正在使用foraech循环来查找使用id的索引。只是因为我正在使用 array.slice().reverse()。

请查看更新后的帖子。我希望我现在理解你了。