индексированный массив post Vue. js Axiom - PullRequest
Новая
       42

индексированный массив post Vue. js Axiom

0 голосов
/ 05 мая 2020

Я могу опубликовать массив объектов в Vue, но у меня возникли проблемы с отправкой простого индексированного массива. Я даю упрощенный код, потому что думаю, что ответ очевиден для опытных.

Вот что у меня есть на данный момент ... 

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

Экземпляр Vue объект данных на данный момент: 

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

Что работает:

  • Пользователь может добавлять / удалять строки в форме.
  • Vue DevTools показывает мне индексированный массив с пустыми полями для каждой строки.

Сообщения об ошибках в консоли JS: Vue error messages

Я хотел бы видеть это в post ... 

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

Вместо этого я могу получить это только потому, что Vue не будет реагировать на изменения ввода ... 

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

Для сравнения, публикация массив объектов работает следующим образом: 

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

Объект данных экземпляра Vue: 

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

1 Ответ

0 голосов
/ 05 мая 2020

Я только что получил ответ на другом форуме. Это было так глупо ... item [index] просто должен быть items [index].

...