我正在尝试将事件绑定到新呈现的动态元素,这是我的尝试。
<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哪个标准。
答案 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元素。_self
技巧。 Here is a fiddle不能仅仅因为它不知道GestureDetector
是什么,而是会帮助您理解的。