VUE 2 сортировка компонентов

[Aetae]

рони, изменения массива this.children сами по себе запускают ререндер, этож vue. Если ты имеешь ввиду изменения в содержимом v-slot, то в задаче этого не стояло, но в принципе можно по beforeUpdate добавить алгоритм сопоставления позиций убирая отсутствующие и добавляя новые в конец, например.

voraa, есть множество способов сделать эту задачу на Vue красиво и аккуратно, просто делать её надо изначально на vue.
Выглядеть будет это например так:

<div id="app">
   <v-line v-for="content in data" @up="up" @down="down">{{content}}</v-line>
</div>

Без всякого шаманства.

Извращения нужны для извращённых случаев, которые идут в разрез с механизмом использования инструмента.

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

То что ты тут видишь - это advanced техники в основном для узких специфических задач авторов плагинов\библиотек. Так что не надо оскорблять божественный Vue.)

P.S. Хотя вот тот же Angular - там да, много ереси.

[рони]

изменения массива this.children сами по себе запускают ререндер,

мои изменения не входят в список
pop: ƒ mutator()
push: ƒ mutator()
reverse: ƒ mutator()
shift: ƒ mutator()
sort: ƒ mutator()
splice: ƒ mutator()
unshift: ƒ mutator()
что делает mutator я не осилил.
мне бы в ручную рендер запустить, я синтаксиса не знаю.
могу конечно достичь нужного запуском без аргументов this.children.splice();
но наверняка есть что-то типа this.render();

[рони]

Aetae,
так сработало this.$forceUpdate();
может есть ещё варианты для такого this.children[0] = {}; или в Vue так не делают?

[Aetae]

рони,

Vue.set(this.children, 0, {});
// или
this.$set(this.children, 0, {});

В vue 3 с этим вопрос решён(используется Proxy), там можно напрямую, но тут мы говорили о Vue 2.)

Собсно к реактивному отлову изменений массива по прямому присвоению до прокси было только два варианта:
1. В vue 2 отказались от этого в пользу splice и Vue.set, описав в документации, зато массив - всё ещё тот же самый массив, работают все методы массива, проверки на массив, сравнение === и.т.д.
2. В mobx сделали объект - обёртку над массивом, реактивно работает присвоение по номеру, но массив уже не массив и по === не сравнить, в функции ожидающие массив с гарантией не передашь и т.д. Требуется явно вызывать .toArray.

[рони]

Aetae,

[ANAGAMA]

Вот чем мне не нравятся все фрейворки, так это тем, что простейшие вещи (почесать левое ухо) надо делать хрен знает как (правой ногой через спину)

ААААААА........... порвало. Да, есть такой момент. Вроде вот оно, вот ну, рядом ЖЕЖ.. а нет...... ))

[ANAGAMA]

<div id="app">
   <v-line v-for="content in data" @up="up" @down="down">{{content}}</v-line>
</div>

Все так. Вопрос. Откуда ВУ. возьмет {{content}}?

Во всех руководствах этот вопрос стеснительно обходится. Дескать,возьмите фетч или аксиос, и загрузите данные и будет вам щастье.

А со страницы как ему данные отправить? Какойнить приличный массивчик.

Эдак 100 записей, каждая из которых маленькая картинка и с десяток полей?

А никак.

Можно упаковать эти данные пярмо в компоненты, но потом их не перетасуешь......

[Aetae]

ANAGAMA, что значит "никак", лол.
Весь современный веб так и работает. API на сервере отдаёт массив вида

[{
  img: 'http://...',
  title: 'text',
  content: 'text'
}, {...}]

а фронт это дело рисует.

[micscr]

А со страницы как ему данные отправить? Какойнить приличный массивчик.

Можно в коде сформировать свои данные в виде js, и потом передать их vue

<div id="app">
	<ul>
	    <li v-for="el in myarr">{{el.name}} - <span v-html="el.content"></span></li>
	</ul>
	
</div>



</body>
<script>
const myarr = [{name:'one', content:'<strong>one</strong>'}, {name:'two', content:'<strong>two</strong>'}, {name:'three', content:'<strong>three</strong>'}];

const vm = new Vue({
	el: "#app",
	data: {
		myarr 
		
	},


});

</script>