Как значению массива передать элемент списка и синхронизировать их (решено)?

Question

[Кирилл Миченус]

Есть список

<ul v-for="arrTest ">
<li id="el-1">1</li>
<li id="el-2">2</li>
<li id="el-3">3</li>
<li id="el-4">4</li>
<li id="el-5">5</li>
</ul>

var arrTest = [
  {id:1,name:'name1',val:10},
  {id:2,name:'name2',val:7},
  {id:3,name:'name3',val:7},
  {id:4,name:'name4',val:11},
  {id:5,name:'name5',val:1}
];

т.е. уже есть готовый список элементов.
Теперь если при сортировке массива arrTest по значению val , элементы тоже должны поменяться ul.
Возможно ли это реализовать?
Вот fiddle https://fiddle.jshell.net/michenus/gm585o3r/
Задача массиву нужно соотнести уже существующие строки. Так чтобы, строки сортировались тогда когда отсортирован массив.
Решение с текстовыми параметрами тут https://fiddle.jshell.net/4tvwjxw6/

<li id="el-2" v-bind:text-content.prop="arrTest[1].name">name1</li>

т.е. теперь есть заначение по умолчанию.
Vue.js не работает с DOM - т.е. не перемещает, удаляет (по функции) их и т.п., а обрабатывает значения и подставляет их?
я правильно понял?

Comments

[Сергей delphinpro]

Если поменяете (в т.ч. отсортируете) массив, он автоматом перерендерится.
у вас не так?

Answer 1

[vism]

v-key проставьте и все