我想在单击具有特定类的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>

10-05 20:43
查看更多