Vue dynamically adds HTML tags and adds instructions and events

now there is a requirement, as shown in figure

when I click the right button, I dynamically add a set of HTML tags with the same style as before, and add v-model and buttons to each input/seclect. And this can be infinitely added, finally to get its data
on the Internet to see the dynamic generation of HTML tags is directly introduced into vue.js. But I did not succeed in this vue project. I would like to ask how to achieve, or is there any other good way to achieve this demand?

Mar.18,2021

the problem you describe is the core function of Vue, whether you use the Vue, introduced by script or the application skeleton generated by vue-cli. To solve this problem, it is up to you to take a look at the official documents and study how to "indirectly" use "data-driven views" instead of directly adding a set of HTML tags at the click of a button. This is a question of thinking, which is precisely the core idea of Vue. Related knowledge points: Vue list rendering, operation (click) to change data, Vue to listen for changes in data dynamic rendering list (that is, you said to add a set of HTML tags).


has been resolved, write it in the form of a component, and click to dynamically generate the component.

<component :is="item.component" v-for="item in items" style="margin-button: 10px;" @rainData="rainData"></component>
Menu