Vue3：向数组或代理添加值

Question

让我们从我正在尝试做的事情开始：我想创建一个应用程序，我可以在其中列出 IP 地址，用户可以添加任意数量的 IP 地址。该应用程序以 1 个输入字段开始，按下 + 按钮，它应该向用户显示一个额外的输入字段。我正在尝试将这些 IP 地址添加到一个数组中，稍后我可以循环访问该数组。 Vue 3 然而将我的基本数组变成了代理，我试图了解如何使用代理 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 但我无法找到如何将基本项添加到数组的末尾（代理？）。使用 v-for 我根据数组包含的项数生成输入字段的数量，但让我们不要深入了解这不是我面临的问题。

这是我的第一个代码片段：

export default {
  data() {
    return {
      addresses: ["192", "193"],
    };
  },
  methods: {
    addIp() {
      this.addressses.push(194);
      // using 194 as an example but I'd like the new item to be empty
    },
}

然而出于某种原因，这并没有将 194 添加到数组的末尾，它实际上并没有做任何事情。当我记录 this.addresses 它 returns 代理时，Vue 将我的基本数组更改为代理，我认为这很好。我查看了如何在 Vue 3 (How can I push to an array (in Vue 3)?) 中将项目添加到 array/proxy，但由于某些原因它不适用于我的代码。

我也试过 this.addresses.push({2: 194}) 看看我是否必须将项目强制到第二个位置，这破坏了我的代码。

我对这个问题的主要问题：

数组真的需要更改为代理吗？为什么？
如果我尝试添加到代理，我 missing/doing 哪里错了？
稍后，我如何通过代理循环？

编辑：

<template>
<form class="serviceForm" @submit.prevent>
<div class="serviceFormServiceAddress">
  <div class="ipButtons">
    <label for="ipAddress">IP Adress</label>
    <button @click="removeIp">-</button>
    <button @click="addIp">+</button>
  </div>
  <input
    type="text"
    v-for="(address, index) in addresses"
    :key="index"
    v-model="addresses[index]"
    name="ipAddress"
    class="ipAddress"
  />
  <!-- change name to different id's -->
</div>
</form>
<button @click="generateServiceList">Test services</button>
</template>

以上是我用来生成输入字段的代码。我正在使用控制台检查我的数组中是否有值，如果在我按下 + 按钮时向数组中添加了某些内容，我是否应该在其他地方执行此操作，如果是：在哪里？

Answer 1

如果我理解正确，请看下面的代码片段：

const app = Vue.createApp({
  data() {
    return {
      addresses: ["192", "193"],
      ip: ''
    };
  },
  methods: {
    addIp() {
      this.addresses.push(this.ip);
      this.ip = ""
    },
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(address, i) in addresses" :key="i">
    {{ i + 1 }}<input v-model="addresses[i]" />
  </div>
  <input v-model="ip" />
  <button @click="addIp">Add</button>
  <p>{{ addresses }}</p>
</div>

Vue3：向数组或代理添加值

Vue3: Add value to array or proxy

javascript

vue.js

proxy

vuejs3