我想在单击具有特定类的dom中的元素时执行一个函数。它只是不工作,但我也收到任何错误。这是我的
代码段:
methods: {
initTab: function(){
document.querySelectorAll('.element').onclick = this.nextTab()
}
},
mounted: function () {
this.initTab()
}
我
我希望每次单击元素时都执行该函数。如果有人能帮助我,我将非常感激:)
最佳答案
将@click="initTab($event)"
添加到文档或模板根目录,这样您就可以跟踪模板上的每个click
事件,这样您就可以将逻辑放到只有.element
类名的元素上。如果您在组件中使用它,则可以执行以下操作:<template> <div @click="initTab($event)"> ... </div> </template>
var app = new Vue({
el: '#app',
data() {
return {
}
},
methods: {
nextTab(){
console.log("You clicked on an element with class name =element")
},
initTab(event){
let targetClassNames=event.target.className.split(" ");
targetClassNames.filter(e=>{
if(e==="element"){
this.nextTab();
}
});
}
},
mounted() {
}
})
#app{
height:100px;
display:grid
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app" @click="initTab($event)">
<button class="element">1</button>
<button class="element btn">2</button>
<button class="btn">3</button>
<button class="element btn-primary">4</button>
<button class="btn elementory">5</button>
</div>