單擊 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）來避免重復 - 而不是通過嘗試向類添加事件偵聽器。