CODEWITHSUNDEEP
vue.jsaxiom
chillywilly
chillywilly

Reputation: 424

post indexed array Vue.js Axiom

I can post an array of objects in Vue, but I'm having trouble posting a simple indexed array. I'm giving streamlined code because I think the answer lies in plain sight for the experienced.

Here's what I've got so far...

<section v-for="(item, index) in items">
  <div>
    <button @click.prevent="deleteItem(index)">delete</button>
    <input type="text" v-model="item[index]" placeholder="enter your item here">
  </div>
</section>
<div>
  <button @click.prevent="addItem">add item</button>
</div>

The Vue instance data object so far:

data () {
  return {
    items: ['']
  }
},

What works:

Error messages in the JS console: Vue error messages

I would like to see this in the post...

{ "items": ["item1 input value", "item2 input value"] }

Instead I'm only able to get this because Vue won't react to the input changes...

{ "items": ["", ""] }

For comparison, posting an array of objects works like this:

<section v-for="(item, index) in items">
  <div>
    <button @click.prevent="deleteItem(index)">delete</button>
    <input type="text" v-model="item.color" placeholder="enter color here">
    <input type="text" v-model="item.price" placeholder="enter price here">
    <input type="text" v-model="item.comment" placeholder="enter comment here">
  </div>
</section>
<div>
  <button @click.prevent="addItem">add item</button>
</div>

The Vue instance data object:

data () {
  return {
    items: [{ color: '', price: '', comment: '' }]
  }
},

Upvotes: 0

Views: 54

Answers (1)

chillywilly
chillywilly

Reputation: 424

I just received the answer in another forum. It was so silly... item[index] just needs to be items[index].

Upvotes: 0

Related Questions