Как динамически добавить элемент с событием Vue?

Question

[Алексей Алексеев]

Если я статически добавляю в шаблон Vue например , то все хорошо работает, на выходе получаем input с событием.

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

Каким образом можно добавлять динамически элементы с событиями vue?

Comments

[Ярослав Иванов]

пример с кодом
все там должно работать

[Сергей delphinpro]

динамически - это как? Напрямую вставляете в DOM? Если да, то так не надо делать.
покажите и код и на нем поясните, что вам нужно.

[Алексей Алексеев]

Сергей delphinpro, Ярослав Иванов, да, вставляю напрямую в DOM. Только начинаю осваивать фреймворк, подскажите как правильно нужно.

Ниже привожу упрощенный код для понимания:

//index.html
<div id="vu-app">
   <div id="container">
      <button v-on:click="addInputButton">Add Input</button>
   <div>
</div>

//vue.js
new Vue({
        el: '#vu-app',
        data: {
        },
        methods : {
            addInputButton : function (event) {
               let str = '<input v-on:keypress="myEvent" type="text">';
               $('#container').append(str); 
            }
           myEvent : function (event) {
                //..
           }
        }
    });

Answer 1

[Сергей delphinpro]

В Vue всегда рендер на основе данных.
Сделайте массив инпутов и рисуйте его. А по клику Добавить - добавляйте значение в массив

{
        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>

Comments

[Алексей Алексеев]

Логику понял, спасибо!