Vue3: Add value to array or proxy

Question

Let's start of with what I'm trying to do: I want to create an app in which I can list IP addresses and the user can add as many as they want. The app starts with 1 input field and with the press of a + button it should show the user an extra input field. I'm trying to add these IP addresses to an array which I can loop through later on. Vue 3 however turns my basic array into a proxy, I've tried to understand how to use proxies (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) but I can't find out how to add a basic item to the end of the array (proxy?). Using v-for I'm generating the amount of input fields based on how many items the array holds, but let's not get into that seeing that that is not the problem I'm facing.

Here's my first code snippet:

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
    },
}

For some reason however this is not adding 194 to the end of the array, it's not really doing anything. When I log the this.addresses it returns a proxy so Vue changed my basic array to a proxy, which is fine, I think. I've looked up how to add items to an array/proxy in Vue 3 (How can I push to an array (in Vue 3)?) but for some reason it doesn't work for my code.

I've also tried this.addresses.push({2: 194}) to see if I had to force the item to the second position, which broke my code.

Main questions that I have regarding this issue:

Does the array really need to be changed to a proxy and why?
What am I missing/doing wrong if I'm trying to add to a proxy?
For later, how do I loop through a proxy?

EDIT:

<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>

Above is the code I'm using to generate the input fields. I'm using the console to check wether or not I have values in my array and if something is added to the array when I press the + button, should I do that somewhere else and if so: where?

You seem to pay too much attention to the proxy part. It's just implementation detail that needs to be taken into account. Reactivity worked without proxies in very similar way in Vue 2. Consider focusing instead on the problem you try to solve. "doesn't work for my code." - which code? Currently the question doesn't contain stackoverflow.com/help/mcve , the problem cannot be reproduced. It's unknown how you observe values. console should not be used for debugging. — Estus Flask
– Estus Flask, Commented Mar 8, 2022 at 18:54
There's a typo in addressses, and 194 is a number and not a string. Otherwise .push(194) will result in ["192", "193", "194"] array without any pitfalls or concerns related to a proxy — Estus Flask
– Estus Flask, Commented Mar 8, 2022 at 18:54
@EstusFlask Thank you for your replies. I've added code to show how I'm generating the input fields. I've also tried to add "194" instead of 194, but it gives me the error Cannot read properties of undefined (reading 'push'). Can you guide me as in where to look first? — G Buis
– G Buis, Commented Mar 8, 2022 at 21:12
The comment above. There is a typo. It's addresses in one place and addressses in another. This is the perfect reason and seemingly the only one why it's undefined — Estus Flask
– Estus Flask, Commented Mar 8, 2022 at 21:47

Nikola Pavicevic · Accepted Answer · 2022-03-08 18:13:48Z

1

If I understood you correctly, take a look at following snippet:

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/[email protected]/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>

answered Mar 8, 2022 at 18:13

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue3: Add value to array or proxy

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related