Как реализовать частичный рендер на Vue.js?

Question

[Булат Кутлиев]

В приложении есть массив объектов.

var objects = [{id:1, title: 'One'}, {id:1, title: 'Two'}, {id:1, title: 'Three'}];

Там же есть компонент для объекта со своим шаблоном.

Vue.component(
'item', 
{ props: ['model'], 
  template: '<div>{{model.id}}, {{model.title}}</div>'
});

Список отрисовывается как
<item v-for="model in Models" :model="model"/>

Один из методов приложения добавляет объект.
objects.push( new { id:4, title: 'Four' } );

Соответственно, весь список перерисовывается. Равно, как и при удалении объекта из списка.
И работая где-то на втором скролле пользователя выбрасывает наверх страницы.

Как повлиять на то, чтобы перерисовывался не весь лист, а только шаблон конкретного экземпляра компонента? И, соответственно, избежать выброса наверх страницы. Спасибо.

Спасибо.

Answer 1

[Антон Антон]

В документации не зря пишут про :key

Comments

[Тимофей]

Ещё и в консоли браузера предупреждение пишется, если vue подключен как модуль и если не включен NODE_ENV=production.

[Булат Кутлиев]

Спасибо! Правда традиционно оказалась прозаичнее -- вместо кнопки стоял <a href="#">Action</a>, честно отправлявший наверх.