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

Question

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

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;
      }

Answer 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