Как инициировать v-for цикл для div с html внутри?

Question

[Aligatro]

Добрый вечер, скажите пожалуйста как создать vue цикл для такой разметки.

пример кода

<div class="container">
	<div class="row" v-for="block in blocks">{{block}}</div>
</div>

data: {
    blocks: [
      block: '<div class="block-5"> <ul v-for="item in list"> {{item}} </ul> </div>',
      block: '<div class="block-7"> <ul v-for="item in list2"> {{item}} </ul> </div>',
    ],
    list: [
      item: '<h1> Заголовок 1 </h1> <p> какой-то текст 1 </p>',
      item: '<h1> Заголовок 2 </h1> <p> какой-то текст 2 </p>',
      item: '<h1> Заголовок 3 </h1> <p> какой-то текст 3 </p>'
    ],
    list2: [
      item: '<h1> Заголовок 3 </h1> <p> какой-то текст 4 </p>',
      item: '<h1> Заголовок 4 </h1> <p> какой-то текст 5 </p>',
      item: '<h1> Заголовок 5 </h1> <p> какой-то текст 6 </p>'
    ],
  }

Я хочу понять как на лету инкапсулировать любой темплейт/компонент/html код со своим data сетом внутрь row.
Просто из найденных мною тьюториалов подобное никто не городил и все заканчивается на посторении простых to-do списков.

И еще мне интересно могу ли я внутри vue приложения привязываться к элементам (классу, событию и т.д) без изначальной разметки html кода под vue.
То есть что-бы внутри app я мог изменить текст внутри element который заранее не был определен, через виртуальный dom vue.

<div class="app">
	<div class="element"> some text </div>
</div>

Спасибо.

Answer 1

[0xD34F]

Положите рядом (в смысле - сделайте свойствами одного объекта) шаблон и данные, которые в него будут засовываться. Т.е., вместо нескольких массивов должен быть один, типа так:

data: () => ({
  blocks: [
    {
      template: '<div><ul><li v-for="n in data" v-html="n"></li></ul></div>',
      data: [
        '<h2>Заголовок 1</h2><p>какой-то текст 1</p>',
        '<h2>Заголовок 2</h2><p>какой-то текст 2</p>',
      ],
    },
    {
      template: '<div><h3 v-for="color in data" :style="{ color }">{{ color }}</h3></div>',
      data: [ 'red', 'green', 'blue' ],
    },
    {
      template: '<div><p v-for="i in data">{{ i }}</p></div>',
      data: 4,
    },
  ],
}),

Сделайте компонент, параметрами которого будут шаблон и данные. Шаблон компилируется, результат компиляции применяется в render-функции:

Vue.component('block-component', {
  props: [ 'template', 'data' ],
  computed: {
    compiled() {
      return Vue.compile(this.template);
    },
  },
  render() {
    return this.compiled.render.call(this);
  },
});

Создавайте экземпляры этого компонента:

<block-component v-for="n in blocks" v-bind="n"></block-component>

https://jsfiddle.net/qnwa4kgv/

Comments

[Aligatro]

Спасибо за развернутый ответ. Меня интересовала именно возможность подобного подхода, как увидел вполне работает.

А что по поводу привязки к элементам внутри элемента app к какому-то дочернему элементу без заранее заданной разметки в html?

Еще раз спасибо.

[0xD34F]

А что по поводу привязки к элементам внутри элемента app к какому-то дочернему элементу без заранее заданной разметки в html?

Aligatro, честно говоря, я как-то не понял, что вы имеете в виду.

[Aligatro]

Что-то вроде этого, просто я не знаю как делать это in right way.

А вот так уже не сработает например - jsfiddle.net/5gxbkg9o/1

[0xD34F]

Aligatro, боюсь что тут мне вам помочь нечем.

[Aligatro]

0xD34F, Понял, благодарю за ответы и время.

Answer 2

[Илья Бельский]

Я так понимаю вам нужна директива v-html, с помощью неё можно вставлять html напрямую.

Comments

[Aligatro]

Но насколько я понял из документации, вставляя элементы таким образом их нельзя сделать динамическими.