Почему изменяется объект при push в массив?

Question

[last_round]

Всем привет, у меня есть такай проблема: Есть массив объектов

nodes = [
  {
    id: 1
  }
  {
    id: 2
  }
  {
    id: 3
  }
]

у этих объектов есть id, также у меня есть экземпляр Vue который по клику на кнопку пушит в массив новый объект с новым id (который берётся из длины массива). Проблема заключается в том что когда я пушу первый раз всё хорошо, добавляется новый объект с новым id, НО когда я пушу второй раз добавляется новый объект с новым id и у старого объекта меняется id на тот который есть у объекта во время второго пуша
Вот код Vue:

vm = new Vue(
  el: '#app'
  data:
    obj:
      id: 0
  methods:
    addNode: ->
      @.obj.id = nodes.length+1 #+1 потому что объект пока не запушен
      nodes.push(@.obj)
      console.log nodes[nodes.length-2].id, nodes[nodes.length-1].id
      console.log nodes
)

Так же прикрепляю песочницу: JSfiddle

Answer 1

[Dmitriy Uvarov]

Все просто, в массив вы кладете ссылку на объект, на который так же ссылается переменная экземпляра Vue, вы меняете id у объекта перед пушем, на который ссылается только что добавленный элемент массива (старый объект). Переменная экземпляра не должна ссылаться на объекты, добавляемые в массив. А вообще, отладка кода, как я уже говорил, наше все

jsFiddle

Comments

[last_round]

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