I want to call two different functions on details tag in Vue

Issue

I want to call function A , when someone clicks on the icon of the details and function B when the summary or text section of this detail summary / text is clicked.

<details @click="function-A">
            <summary @click="function-B">
                Some Text
            </summary>
        </details>

I tried everything, I also used some event modifiers, but it did not work as expected

Solution

The arrow icon is a ::marker pseudo element that is attached to the summary element and it's basically impossible to listen to an event on a pseudo element.

A possible work around would be to listen to clicks on the summary element then disabling the point-events for the entire element and enabling it back for the pseudo element, see this post.

---

If you just want to get the state of the details element (open/closed), you can use the toggle event:

<script setup>
const toggle = (event) => console.log(event.newState, event.oldState)
</script>

<template>
  <details @toggle="toggle">
    <summary>
      Some Text
    </summary>
  </details>
</template>

Answered By - Shaya Ulman