為什么當我從數組中推送和/或拼接對象時，我的 Vue.js 應用程序不會自動更新？

Question

我正在使用 Quasar 和 Vue.js 創建一個表單，我可以在其中將對象添加到數組中，這樣它們就可以同時插入到數據庫中，但是每當我從這個數組中添加或刪除一個對象時，它只會在之后更新我專注於表單中的任何其他輸入，它按應有的方式從數組中添加和刪除對象，但除非我專注於表單中的任何其他輸入，否則它不會顯示在屏幕上，請遵循代碼：

<template>
  <form>
    <q-input
      v-model = "eventTitle"
      label = "Event title"
    />
    <div
      v-for = "(task, index) in tasks" :key = "index"
    >
      <q-btn
        label = "Remove Task"
        @click = "removeTask(index)"
      />
      <q-input
        v-model = "task.title"
        label = "Title"
      />
      <q-input
        v-model = "task.date"
        label = "Date"
      />
      <q-input
        v-model = "task.desc"
        label = "Description"
      />
    </div>

    <q-btn
      label = "Add Task"
      @click = "addTask"
    />
  </form>
</template>

<script>
  export default {
    setup () {

      const singleTask = {
       title: '',
       date: '',
       desc: ''
      }

      var tasks = []

      return {
        tasks,
        singleTask
      }
    },

    methods: {
      addTask() {
        this.tasks.push(this.singleTask)
      },

      removeTask(index) {
        this.tasks.splice(index, 1)
      }
    }
  }
</script>

每當我在一個對象上編輯一個字段時，其他對象也會被修改（這是另一個問題）。 如果有人對此有任何建議，我將不勝感激，因為我從未見過這樣的事情。

提前感謝您的建議和回答。

Answer 1

這里有多個問題：

1. singleTask是單個對象實例。 將其推入數組不會創建對象的副本。 因此，您的數組包含多個項目 - 對一個對象的引用都指向一個對象。 Google for "JS value vs reference" 理解概念

2. 您正在使用setup ，但從它返回的數據結構不是反應數據。 您需要使用ref或reactive

3. 不要使用index作為key - 這與根本不使用key相同。 key必須是穩定的——這意味着它應該將迭代數組中的任何單個對象“連接”到 Vue 為其創建的 DOM 元素（或元素組）。 索引不穩定，因為當您從數組中刪除項目時它會發生變化

最后一條建議：不推薦組合使用 Composition API 和 Options API。 使用一個或另一個。 優秀的新教程可以提供幫助