@remlin1000
любитель

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

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

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

Каким образом можно добавлять динамически элементы с событиями vue?
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
delphinpro
@delphinpro
frontend developer
В 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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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