将项目添加到数组篮后，v警报的setTimeout

Question

这是我的模板

<template>
  <div>
    <h1 align="center">{{ title }}</h1>
    <v-alert type="info" icon="mdi-emoticon-sad" v-if="basketStatus">
      Empty Basket, please add some to basket
    </v-alert>
    <div v-if="changeAlertStatus()">
      <v-alert
        type="success"
        icon="mdi-emoticon-happy"
        :value="alert"
        transition="fade-transition"
      >
        thank you
      </v-alert>
      <v-simple-table>
        <template v-slot:default>
          <thead>
            <tr>
              <th class="text-left">Quantity</th>
              <th class="text-left">Name</th>
              <th class="text-left">Price</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in basket" :key="item.name">
              <td>
                <v-icon @click="increaseQuantity(item)">add_box</v-icon>
                <span>{{ item.quantity }}</span>
                <v-icon @click="decreaseQuantity(item)"
                  >indeterminate_check_box
                </v-icon>
              </td>
              <td>{{ item.name }}</td>
              <td>{{ (item.price * item.quantity).toFixed(2) }}</td>
            </tr>
          </tbody>
        </template>
      </v-simple-table>
      <v-divider color="black"></v-divider>
      <v-row id="basket_checkout" style="margin: 0">
        <v-col>
          <p>Subtotal:</p>
          <p>Delivery:</p>
          <p>Total amount:</p>
        </v-col>
        <v-col class="text-right">
          <p>${{ subTotalResult }}</p>
          <p>$10</p>
          <p class="font-weight-bold">${{ totalPriceResult }}</p>
        </v-col>
      </v-row>
      <v-row>
        <v-spacer></v-spacer>
        <v-btn depressed class="orange" v-on:click="submitOrder">
          <v-icon>shopping_basket</v-icon>
        </v-btn>
      </v-row>
    </div>
  </div>
</template>

如您所见，通过检查以下内容，当阵列篮中没有物品时，会显示两个警报；>

basketStatus() {
  return this.$store.getters.basket.length === 0;
},
这是计算属性我的数据属性部分是

  data() {
    return {
      title: "Current Basket",
      alert: false,
    };
  },
但是对于第二个v-alert，我想让警报显示并在几秒钟后消失，到目前为止，我已经对其进行了以下操作

  async changeAlertStatus() {
      if (this.$store.getters.basket.length !== 0) {
        this.alert = true;
        try {
          const response = await setTimeout(() => {
            this.alert = false;
          }, 100);
          console.log("this is the resonse " + response);
        } catch (err) {
          console.log("fetch failed", err);
        }
      } else {
        this.alert = false;
      }
    },
这是一种方法我很困惑如何在不使用v-if指令的情况下将函数插入div部分，并且当我在控制台中检查它并且v-alert不会消失时，我的异步changeAlertStatus进入无限循环

对此有何想法？

如果需要更多信息，请告诉我

谢谢

这是我的模板

Answer 1

而不是仅在changeAlertStatus属性中绑定它，而不是在v-if指令中调用this.alert？然后，单击“添加到购物车”按钮时，其回调可以将this.alert设置为true，从而显示警报。在将this.alert设置为true之后，注册setTimeout以将其恢复为false