Question

我正在使用Laravel＆Vue.js。当我在页面上添加一些元素并使用jQuery Vue.js更改DOM时，@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>

重点是，您不使用Vue.js进行直接DOM操作，因为此框架实际上是在构建虚拟DOM而不是真正的DOM，它支持条件渲染，双向数据绑定等。

在Declarative and Imperative programming上查看这篇不错的文章。

如何将Vue.js事件附加到通过jQuery.append（）添加的动态元素上

1 个答案: