Добавление элемента в массив с v-моделью приводит к дублированию - PullRequest
Новая
       14

Добавление элемента в массив с v-моделью приводит к дублированию

0 голосов
/ 22 ноября 2018

У меня есть список текстовых полей ввода, созданных с помощью v-for с v-model для массива.Я хочу добавить элементы в массив и, таким образом, создать еще одно поле ввода.

Пока все работает.Проблема в том, что новым полям ввода каким-то образом присваивается один и тот же индекс (?) Или происходит что-то еще, что приводит к тому, что они отображают одно и то же значение.

Я сделал этот jsfiddle , чтобы продемонстрировать, что я имею в виду. Если дважды нажать кнопку, а затем попытаться отредактировать одно из новых полей ввода, то все новые поля ввода получат отредактированное значение.Я бы хотел, чтобы только отредактированное поле ввода показывало входное значение.

Полагаю, что-то здесь я пропускаю.Кто-нибудь может помочь с этим, пожалуйста?

Javascript: 

new Vue({
  el: '#app',
  data: {
    items: [{name: "one", id: 0}],
    template: {
        name: "two",
        id: 2,
    },
  },
   methods: {
    addRow: function(){
    this.items.push(this.template);
    this.items[this.items.length - 1].id = Math.random();
    }
  }
  })

HTML: 

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="(item,index) in items" :key="item.id">
  <input v-model="item.name">
  </div>
  <button v-on:click="addRow">
  Add row
  </button>
  <div>Array content: {{items}}</div>
</div>

Использование: скриншот того, что я получаю

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Проблема здесь в том, что с array.push(declaredObject) вы добавляете ссылку template, поэтому каждое изменение будет отражаться во всех его ссылках.

Вы должны добавить новый объект с такими же свойствами, выМожно достичь этого разными способами, более распространенным является Object.assign({}, this.template), а новейшим является Разрушающие объекты {...this.template}.так в вашем случае должно быть this.items.push({...this.template})

0 голосов
/ 22 ноября 2018

try 

   this.items.push({
            name: "two",
             id: 2,
           });

вместо this.items.push(this.template), поскольку свойство template является реактивным, и оно повлияет на другие свойства, которые его используют

отметьте это fiddle

...