Как в VUE вывести шаблон в цикле из кода js?

Question

[Игорь Безлепкин]

Привет! Появилась необходимость в компоненте добавлять в DOM элементы по-старинки, но так как это кусок HTML c переменными, нужно в js как то шаблон сделать, заполнить его переменными и сделать append. Подскажите, как в Vue в коде js можно взять html шаблон, типа как в mustache.js
var result = Mustache.render(template, data);
output.append(result);

и в цикле уже добавлять в DOM элемент.

Comments

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

Появилась необходимость в компоненте добавлять в DOM элементы по-старинке

Можно подробнее?

[Игорь Безлепкин]

Антон Антон, https://jsfiddle.net/n0rmt92o/2/ - тут скрол постоянно меняется
А в нативе нет https://jsfiddle.net/8v9rqyh5/4/

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

Игорь Безлепкин, а ничего, что там стили у ul и li разные? сделайте одинаковыми и будет одинаковое поведение

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

https://jsfiddle.net/n0rmt92o/4/

[Игорь Безлепкин]

Антон Антон, и ничего не изменилось :) в нативе при добавлении элементов элементы как бы на месте (выбрал нужный, и сверху подгрузка идет)

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

Игорь Безлепкин, у меня (firefox) не так, у меня что на vue, что в вашем варианте "нэйтив" одинаково https://imgur.com/a/8kxlcuz

[Игорь Безлепкин]

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

Answer 1

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

Мне лень, вот решение с прилипанием "к низу" https://jsfiddle.net/n0rmt92o/29/
адаптировать до прилипания "к верху" несложно, достаточно инвертировать логику прилипания, но ИМХО добавление новых сообщений снизу более логично.

Comments

[Игорь Безлепкин]

Тут нужно добавление сверху, это мессенджер. при скроллинге вниз, подгружать и добавлять сверху сообщения.

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

Игорь Безлепкин, ну так мне лень это делать бесплатно, тут и так пример такой, который несильно сложно переделать на желаемое