Question

我有一个旧项目，该项目使用jQuery在list元素上实现无限滚动效果。我将Vue安装在该列表的容器元素上。每个li都有一个@click="showModal(params)"属性。页面首次加载时，每个链接都会正确触发vue模式组件。

当jQuery无限滚动插件添加其他li元素时，我遇到了问题。这些元素中的链接不再触发模式。我该如何告诉Vue注意这些新元素？

如果可能的话，我真的想避免在Vue中重新做jQuery无限滚动插件。

到目前为止，我已经研究了$forceUpdate()和$mount()。两者似乎都无法解决问题。

Vue组件

// set up component
Vue.component('modal', {
   template: '#modal-template-id',
   props: [ 'modalContent' ]
});

// initialize Vue instance
_vm = new Vue({
   el: '#list-container-element-id',
   data: {
      modal: { visible: false, item: '' },
   },
   methods: {
      showModal(item) {
          this.modal.item = item;
          this.modal.visible = true;
      }
   }
});

jQuery插件

$('#list-id').lazyload({
   url: ajaxurl + ?action=get_more_list_items_endpoint',
   success: function(res) {
     _vm.$forceUpdate() // this does not work
     _vm.$mount(''#list-container-element-id'); // also does not work
   }
})

Answer 1

好的。我花了30分钟来实现jQuery modal，这解决了问题。

Vue很酷，但是总有合适的工具来完成这项工作。

如何使VueJS记录新添加的DOM元素？

1 个答案: