[英]Vue: Bind click event to dynamically inserted content
我有一个Vue应用程序,该应用程序从包含一些块的API请求一些HTML,例如<div class="play-video">...</div>
通过axios通过axios调用API,将其插入到dom中,如下所示:
<div v-if="content" v-html="content"></div>
如何将点击事件与.play-video
类的孩子绑定在一起? 只是看着content
更改,然后运行香草js查询选择器绑定到它们就可以了吗?
您可以通过添加@click
处理程序并使用Element.matches()
检查目标元素来使用某些事件委托
new Vue({ el: '#app', data: { content: null }, methods: { handleClick(e) { if (e.target.matches('.play-video, .play-video *')) { console.log('Got a click on .play-video or a child element') } } }, mounted () { // simulate loading content setTimeout(() => { this.content = ` <div> <p>Some other element</p> <button>I'm not part of <code>.play-video</code></button> <div class="play-video"> <p><button>Click me, I am!</button></p> </div> </div> ` }, 1000) } })
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <div id="app"> <div v-if="content" v-html="content" @click="handleClick"></div> <p v-else>Loading...</p> </div>
如果您只想捕获.play-video
元素本身而非所有子元素的点击事件,请将选择器更改为'.play-video'
。
有关浏览器的兼容性,请参见https://developer.mozilla.org/zh-CN/docs/Web/API/Element/matches#Polyfill ,如果需要,请使用polyfill。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.