Vue JS：如何防止输入在实时数据上更新自身？

Question

我正在将数据传递到 Modal 进行编辑。问题是每当我的产品数据更新时（通过 fetchData 每 5 秒），模式中的输入字段也会更改。如何预防？

下面是我的代码的简化版本。

<div id="app">
  <div class="modal" id="modal1">
    <form method="post">
      <input type="text" :value="passedData.category" />
      <input type="text" :value="passedData.rating" />
      <input type="text" :value="passedData.price" />
      <input type="text" :value="passedData.stock" />
      <button>Submit</button>
    </form>
  </div>

  <table>
    <tr v-for="item in items">
      <td>{{ item.sku }}</td>
      <td>{{ item.stock }}</td>
      <td><button @click="openModal('modal1', item)">Edit</button></td>
    </tr>
  </table>
  
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        items: [],
        passedData: [],
      };
    },
    mounted() {
      this.fetchData();
      setInterval(this.fetchData, 5000);
    },
    methods: {
      async fetchData() {
        const response = await fetch("https://dummyjson.com/products");
        const data = await response.json();
        this.items = data.products;
      },
      openModal(idModal, item) {
        this.passedData = Object.assign({}, item);
      },
    },
  });

  app.mount("#app");
</script>

Answer 1

根据 此文档 - 在您的

<input>

中，使用

v-model

而不是

:value

- 即

<div class="modal" id="modal1">
    <form method="post">
        <input type="text" v-model="passedData.category" />
        <input type="text" v-model="passedData.rating" />
        <input type="text" v-model="passedData.price" />
        <input type="text" v-model="passedData.stock" />
        <button>Submit</button>
    </form>
</div>