将事件侦听器绑定到新呈现的动态元素

时间:2019-05-17 07:18:31

标签: vue.js

我正在尝试将事件绑定到新呈现的动态元素,这是我的尝试。

<div id="app">
    <a href="#" @click="loadData">Load Data</a>
    <ul>
        <li class="collections" v-for="item in collections" :key="item.id">{{ item.name }}</li>
    </ul>
</div>

new Vue({
  el : '#app',
  data : {
    files : []
  },
  mounted(){
    const _self = this;
    axios.get('myapi.com/api/users',{})
    .then(function(res){
      _self.files = res.data.users;

      // add event
      document.querySelectorAll('.collections').forEach(function(el){
        _self.$ons.GestureDetector(el).on("hold", function(event) {
          alert();
        });
      });

    });
  },
  computed : {
    collections(){
      return this.files;
    }
  },
  methods : {
    loadData(){
      const _self = this;
      axios.get('myapi.con/api/users/2',{})
      .then(function(res){
        _self.files = res.data.users;
        document.querySelectorAll('.collections').forEach(function(el){
            _self.$ons.GestureDetector(el).on("hold", function(event) {
                alert();
            });
        });
      });
    }
  }

});

似乎以异步方式更新DOM树上的元素,因为我尝试做console.log(document.querySelectorAll('.collections').length)返回0,并通过控制台返回目标元素的实际计数。有什么帮助吗,想法吗?

注意:事件的手动绑定有其自己的目的或意图。我可以真正在Vue上使用@click哪个标准。

1 个答案:

答案 0 :(得分:2)

有2个问题:1)从第三方库实现自定义hold事件,以及2)装入v-for项后访问其DOM。因此,您应该为每个collections项目使用一个组件,并在该组件中使用mounted钩子:

1。 为collections项目创建自定义组件,并将该项目作为道具传递

Vue.component('collection-item', {
  props: ['item'],
  template: `<li>{{ item.name }}</li>`,
  mounted() {
    // THIS IS WHERE YOU'LL PLACE YOUR CUSTOM EVENT
    // No need for `_self` when you use an arrow function
    // this.$el points to the DOM element
    this.$ons.GestureDetector(this.$el).on("hold", event => {
      alert(event);
    });
  }
})

2。 调整模板

<ul>
  <collection-item v-for="item in collections" :key="item.id" :item="item" />
</ul>

3。 从主应用程序组件中删除所有事件处理程序代码

注意一些事情:

  • 在自定义组件的mounted挂钩中,您可以使用this.$el指向DOM元素。
  • 如果您使用arrow function,则不需要_self技巧。

Here is a fiddle不能仅仅因为它不知道GestureDetector是什么,而是会帮助您理解的。