How to trigger a v-for loop on a div with html inside?

Question

Vue.js

Good evening, please tell me how to create a vue loop for such markup.

code example

<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>'
    ],
  }

I want to understand how to encapsulate any template/component/html code with its data set inside row on the fly .
It’s just that no one of the tutorials I found made such a fuss and it all ends with building simple to-do lists.
And I’m also wondering if I can bind to elements (class, event, etc.) inside the vue application without the initial markup of the html code under vue.
That is, inside the app , I could change the text inside the element , which was not previously defined, through the virtual dom vue.

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

Thank you.

Answer 1

Uh-uh, right ?