单击 Vue.js 中的 DOM 元素时执行函数

Question

当我单击具有特定类的 dom 中的元素时，我想执行一个函数。 它只是不起作用，但我也收到任何错误。 这是我的

代码片段：

        methods: {
            initTab: function(){
                document.querySelectorAll('.element').onclick = this.nextTab()
            }
        },            
        mounted: function () {
            this.initTab()
        }

我想在每次点击元素时执行该功能。 如果有人可以帮助我，我将非常感激:)

Answer 1

在 Vue 应用程序中几乎不需要（如果有的话） document.querySelectorAll() 。

在这种情况下，您可以利用委托：

<div @click="onClick">
  <!-- Clicks on any element inside this div will be handled -->
</div>

methods: {
  onClick(e) {
    if (e.target.classList.contains('element')) {
      // Handle the click
    }
  }
}

Answer 2

将@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>

Answer 3

您正在尝试在 vue 中使用通用的 javascript 逻辑。 这通常不是一个好主意。

在这种情况下，我所做的是这样的：

<component-name @click="nextTab(tabName)"></component-name>

但是，在 v-for 循环中，您也可以执行以下操作：

<ul v-for="tab in tabs">
  <li @click="nextTab(tab)">{{tab}}</li>
</ul>

这样在方法中你只需要：

methods: {
    nextTab: function(tab){
       // whatever it is you want to do here
    } 
},

而且您根本不需要安装。

结论：尝试通过创建重复的组件或元素（如 li）来避免重复 - 而不是通过尝试向类添加事件侦听器。