vue.js - 无法在“节点”上执行“插入前”：更新值时

Question

我有这个项目列表，当我按下确认按钮时，我正在尝试更改 UI，但它会引发错误，并且 UI 在我刷新页面之前不会更新，有人可以在这里帮助我吗？

我v-if用来更改按钮，这一切都取决于我从 DB 获得的状态。

confirm_Product(item) {
      let index = this.order.products.findIndex(
        (product) => product.product_code === item.product_code
      );
      this.order.products[index].status = 1
      console.log((this.order.products[index].status = 1));
    }

      <template v-slot:item.actions="{ item }">
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              v-if="item.status === 0"
              class="ma-2"
              right
              color="green"
              dark
              small
              @click="confirm_Product(item)"
              style="width: 8rem"
            >
              <v-icon medium class="mr-2" v-bind="attrs" v-on="on">
                mdi-checkbox-marked-outline </v-icon
              >Confirm
            </v-btn>
            <v-btn
              v-if="item.status === 0"
              class="ma-2"
              right
              color="red"
              dark
              small
              @click="rejectItem(item)"
              style="width: 8rem"
            >
              <v-icon medium class="mr-2" v-bind="attrs" v-on="on">
                mdi-cancel </v-icon
              >Reject
            </v-btn>
            <v-chip v-if="item.status === 1" color="success" outlined
              >Confirmed</v-chip
            >
            <v-chip
              v-if="item.status === 2"
              color="primary"
              @click="viewShippingDetails(item)"
              link
              outlined
              pill
              >View Shipping details
              <v-icon right> mdi-arrow-right </v-icon>
            </v-chip>
          </template>
        </v-tooltip>
      </template>

标签： vue.jsvuetify.js

Answer 1

将v-ifs更改为v-show现在可以正常工作了。