当我在设置脚本中更新数组时，v-for不会在模板中重申

Question

我在一个模板中有一个v-for，当我更新数组时不会触发它，这是我的代码，

我尝试了几种选择，但不可能看到变化。

我尝试了一段时间看看它是否更新，但没有结果你能帮我吗？提前感谢

<script setup lang="ts">
var notificationData = [
  {
    icon: "bi bi-bag text-theme",
    title: "NEW ORDER RECEIVED ($1,299)",
    time: "JUST NOW",
  },
];
setInterval(function () {
  console.log("setInterval");
  console.log(notificationData);
  notificationData.push({
    icon: "bi bi-credit-card text-theme",
    title: "PAYMENT METHOD ENABLED",
    time: "10 MINUTES AGO",
  });
}, 10000);
</script>
<template>
   <div class="dropdown-menu dropdown-menu-end mt-1 w-300px fs-11px pt-1">
          <h6 class="dropdown-header fs-10px mb-1">NOTIFICATIONS</h6>
          <div class="dropdown-divider mt-1"></div>
          <template v-if="notificationData && notificationData.length > 0">
            <a
              href="#"
              class="d-flex align-items-center py-10px dropdown-item text-wrap"
              v-for="(notification, index) in notificationData"
              v-bind:key="index"
            >
              <div class="fs-20px">
                <i
                  v-if="notification.icon"
                  v-bind:class="notification.icon"
                ></i>
              </div>
              <div class="flex-1 flex-wrap ps-3">
                <div class="mb-1 text-white">{{ notification.title }}</div>
                <div class="small">{{ notification.time }}</div>
              </div>
            </a>
          </template>
          <template v-else>
            <div class="dropdown-notification-item">No record found</div>
          </template>
          <hr class="bg-white-transparent-5 mb-0 mt-2" />
        </div>
</template>

Answer 1

使用ref((使数组反应

Answer 2

我用vuejs反应函数封装了我的数组，多亏了Sherif Hassan ，它现在可以正常工作了

var notificationData = reactive([
  {
    icon: "bi bi-bag text-theme",
    title: "NEW ORDER RECEIVED ($1,299)",
    time: "JUST NOW",
  },
]);

Answer 3

notificationData需要进入Vue

var app = new Vue ({
      date(){
          return{ 
            notificationData
          };
      }
    });