如何從 Vue.js 中的 HTML 元素獲取 id

Question

我有一個 Vue 應用程序，在那里我有幾個具有不同 id 的相同 fontawesome 徽標。

<p @click="getId($event)" class="trash"><i id="1"  class="fas fa-trash-alt"></i></p>
<p @click="getId($event)" class="trash"><i id="2"  class="fas fa-trash-alt"></i></p>
<p @click="getId($event)" class="trash"><i id="3"  class="fas fa-trash-alt"></i></p>

現在，當我單擊這些徽標之一時，我會執行以下方法：

getId(event){
      console.log(event.currentTarget.id);
    }

當我現在點擊一個標志時，我得到一個空的控制台輸出。 我在谷歌上搜索過這個問題很多次，也嘗試過類似的事情：

<p class="trash"><i id="1" @click="getId(this)"  class="fas fa-trash-alt"></i></p>

getId(logo){
  console.log(logo.id);
}

在這種情況下，我返回一個未定義的。 可能是什么問題呢？

Answer 1

<p class="trash"><i id="1" @click="getId(this)"  class="fas fa-trash-alt"></i></p>

getId(logo){
 console.log(event.target.id);
}

正如迪帕克在評論中提到的，您需要做的就是獲取事件目標 id 以從元素獲取價值。