How to dynamically add an element with a Vue event?

Question

Vue.js

If I statically add to the Vue template for example , then everything works fine, at the output we get an input with an event.

But if I add the same code dynamically, then it doesn't work, we get . those. vue doesn't recognize the bound event.

How can you dynamically add elements with vue events?

Answer 1

Vue always renders based on data.
Make an array of inputs and draw it. And on click Add - add a value to the array

{
        el: '#vu-app',
        data: {
          inputs: [],
        },
        methods : {
            addInputButton : function (event) {
               this.inputs.push('Кнопка');
            },
            myFunc(index){
              alert('Нажата кнопка '+index);
            }
        }
    }

<div id="container">
      <button v-on:click="addInputButton">Add Input</button>

      <input
        v-for="(inp, index) in inputs"
        :key="index"
        :value="inp"
        type="button"
        @click="myFunc(index)"
      />
   <div>