如何让 VueJS 注意到新添加的 DOM 元素？

Question

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

当 jQuery 无限滚动插件添加额外的 li 元素时，我运行遇到了问题。这些元素中的 links 不再触发模式。我怎样才能让 Vue 注意到这些新元素？

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

到目前为止，我看过 $forceUpdate() and $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 元素？

How can I make VueJS take note of newly added DOM elements?

javascript

jquery

infinite-scroll

vue-component

vuejs2