Как вы присоединяете события Vue.js к динамическим элементам, добавленным с помощью jQuery.append ()

Question

Я использую Laravel & Vue.js.Когда я добавляю некоторые элементы на страницу и изменяю DOM с помощью jQuery Vue.js, такие события, как @click & @blur не будут работать.

Есть ли способ обновить DOM?

dropzone_success(file, response) {

$('.dz-details').append('<button type="button" class="thumb_button" id="'+response.path+'" @click="somemethod($event)">Make Default</button>');

}

А мой метод например:

somemethod(event)
{
     console.log(event.target);
}

Answer 1

Скорее всего, вам не следует использовать Vue.js с jQuery, так как они работают в совершенно другой концепции.Следующее должно дать вам общее представление о том, как это можно сделать только в Vue.js:

const vm = new Vue({
  data() {
    return {
      dropzone: {},
      dropzoneOpts: {
        // ...
      },

      responsePath: ''
    }
  },

  mounted() {
    this.dropzone = new Dropzone('#dropzone_id', {
      ...this.dropzoneOpts,
      success: this.dropzone_success
    });
  },

  methods: {
    dropzone_success(file, response) {
      this.responsePath = response.path;
    },

    somemethod(evt) {
      // ...
    }
  }
});

<div class="dz-details">
  <button 
    v-if="responsePath" 
    :id="responsePath" 
    class="thumb_button"
    @click="somemethod">Make Default</button>
</div>

Дело в том, что вы не выполняете прямую манипуляцию DOM с Vue.js в качестве этой платформыдействительно строит виртуальный DOM вместо реального DOM, он поддерживает условный рендеринг, двустороннее связывание данных и т. д.

Ознакомьтесь с этой замечательной статьей по Декларативное и императивное программирование .