Динамические входы, v-модель обновляет все значения в v-for - PullRequest
Новая
       48

Динамические входы, v-модель обновляет все значения в v-for

1 голос
/ 13 июня 2019

Я пытаюсь использовать следующий код с Vue.js 2: 

<div id="app">
  <div v-for="(item, index) in items">
    <div>
      <input type="text" v-model="items[index].message">
      <input type="text" v-model="items[index].surface">
    </div>    
  </div>
<button @click="addNewfield">Add</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    item: {
      message: 'test',
      surface: 45
    },
    items: [],
  },
  mounted() {
    this.items.push(this.item)
  },
  methods: {
    addNewfield() {
      this.items.push(this.item);
    }
  }
})

Цель состоит в том, чтобы создать ввод новостей, когда пользователь нажимает кнопку Добавить.Я пробовал разные способы, такие как: 

<input type="text" v-model="item.message">

Но это не работает.Если вы введете данные «сообщения», все входы «сообщения» будут обновлены.

Как я могу только обновить соответствующее значение?

Спасибо за помощь!

1 Ответ

2 голосов
/ 13 июня 2019

Это происходит потому, что объекты в Javascript хранятся по ссылке. Это означает, что каждый раз, когда вы помещаете this.item в массив, он добавляет ссылку на тот же объект, что и последний.

Вы можете избежать этого, каждый раз создавая новый объект: 

methods: {
  addNewfield() {
    const obj = {
      message: 'test',
      surface: 45
    } 
    this.items.push(obj);
  }
}

Другой вариант - клонировать исходный объект каждый раз, например: 

methods: {
  addNewfield() {
    const clone = Object.assign({}, this.item);
    this.items.push(clone);
  }
}
...