Лучший способ редактировать массивы в Vue. V-модель выпуска

Question

Я довольно новичок в Vue и пытался редактировать массив строк, используя свойство v-model. Я создал маленький jsfiddle и у меня возникли проблемы при редактировании массива. Появляется ошибка, говорящая, что я должен использовать объект при использовании v-модели, но когда я нажимаю кнопку удаления, кажется, что он был отредактирован. также добавление нового поля ввода сбрасывает предыдущие.

Как лучше всего редактировать массив и сохранять его в том же формате

Answer 1

я разветвил ваш jsfiddle , где в основном я изменил привязку элемента ввода, чтобы изменить его значение при отправке события input:

<input id="field-option-0" class="input-large form-control" type="text" @input="inputHandler(index, $event)" :value="option">

теперь вы передаете для этого обработчик выполняет функцию текущего индекса вашего списка и собственного $event, чтобы установить его в вашем списке.

inputHandler(index, e) {
  this.field_data.value_options[index] = e.target.value
}

Answer 2

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

Предупреждение состоит в том, что вы должны сделать каждый элемент массива объектом и ссылаться на свойство этого объекта. Таким образом, вы поддерживаете целостность массива.

value_options: [
  { key: 1, value: 'testing bro' },
  { key: 1, value: 'yea testing' }
];

Затем ссылка на свойство вместо самого элемента массива.

 <div v-for="(option, index) in field_data.value_options">
      <input v-model="option.value">