Aligatro
@Aligatro
Turn food and coffee into software...

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

Добрый вечер, скажите пожалуйста как создать 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>


Спасибо.
  • Вопрос задан
  • 550 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега Vue.js
theartkod
@theartkod
front-end разработчик
Я так понимаю вам нужна директива v-html, с помощью неё можно вставлять html напрямую.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы