主页 / 问题 / 1368894
Accepted
merlinby
Asked:2022-06-06 04:45:59 +0000 UTC2022-06-06 04:45:59 +0000 UTC

如何获取对 Vue.js 中 @click 所单击和处理的按钮的引用

  • 772

有一个嵌套了 svg 的按钮：

<template v-for="row in objekts" :key="row.id">
  <tr class="table__objem-row">
    <td v-for="(td, i) in tableStructureVisible" :key="i">
      {{ row[td.field] }}
    <button class="btn-arrowed" @click="hideAllDetails">
      <svg width="24" height="24" role="img" aria-hidden="true">
        <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
      </svg>
    </button>
    </td>
  </tr>
</template>

一个事件到达函数，其目标不是按钮，而是嵌套在其中的 svg。我需要按钮的参考。通过路径解决问题：

hideAllDetails(e) {
  // удаляем window и document из массива, они не работают с contains
  const btn = e.path.slice(0,-2).find(el => el.classList.contains('btn-arrowed')); 
  btn.classList.add("table__details-row-shown");
  setTimeout(() => {
    btn.classList.remove("table__details-row-shown");
  }, 1500);
}

但有件事告诉我有一种更简单的方法。而且总的来说，我真的很想了解为什么on-click事件在按钮上，但是它是从嵌套在按钮中的svg元素调用的。

javascript

2 个回答

  1. <template>
  <button
    v-for="(btn, idx) in buttons"
    :key="btn.id"
    class="button"
    @click="removeElement(btn.id)"
  >
    {{ btn.text + btn.id }}
  </button>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      buttons: [
        {
          id: '1',
          text: 'button',
        },
        {
          id: '2',
          text: 'button',
        },
        {
          id: '3',
          text: 'button',
        },
      ],
    };
  },
  methods: {
    removeElement(id) {
      const idx = this.buttons.findIndex((el) => el.id === id);
      this.buttons.splice(idx, 1);
    },
  },
};
</script>
    • 0
  2. Best Answer

    由于用户@AleksandrBelous和@Kain（非常感谢）的帮助，我为优化任务的解决方案做了2 个选项：

    1. 为添加样式pointer-events: none时，只有按钮进入，然后您已经可以使用它进行操作，而无需搜索数组。事件处理函数将是这样的：svgevent.targetevent.path
    hideAllDetails(event) {
    const btn = event.target;
    btn.classList.add("table__details-row-shown");
    setTimeout(() => {
        btn.classList.remove("table__details-row-shown");
    }, 1500);
}
    1. 使用状态数组的选项：
    export default {
  data() {
    return {
      tableHideAllBtnStatus: [],
    }
  }
}

    <template v-for="row in objekts" :key="row.id">
  <tr class="table__objem-row">
    <td v-for="(td, i) in tableStructureVisible" :key="i">
      {{ row[td.field] }}
    <button 
       class="btn-arrowed" 
       :class=" { 'table__details-row-shown' : tableHideAllBtnStatus.includes(row.id) } "
       @click="hideAllDetails(row.id)">
      <svg width="24" height="24" role="img" aria-hidden="true">
        <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
      </svg>
    </button>
    </td>
  </tr>
</template>

    hideAllDetails(rowId) {
    this.tableHideAllBtnStatus.push(rowId)
    setTimeout(() => {
        this.tableHideAllBtnStatus = this.tableHideAllBtnStatus.filter(e => e !== rowId);
    }, 1500);
}
    • 0

相关问题