如何在使用jQuery.append()添加的动态元素上附加Vue.js事件
如何在使用jQuery.append()添加的动态元素上附加Vue.js事件
提问于 2019-02-22 13:07:17
我使用的是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);
}回答 1
Stack Overflow用户
发布于 2019-02-22 13:44:14
首先，您可能不应该将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上的这篇不错的文章。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54820400
复制相关文章
相似问题
腾讯云开发者
