Question 307830 in Html Question posted in
Some basic documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Use Vue’s .stop modifier

    Vue has event modifiers that account for this use case, and the .stop modifier should be what you need.

    This works for me:
    https://codepen.io/MarsAndBack/pen/PoLYPZR

    <div @click="doSomething" class="container">
  content
  <button @click.stop="doSomething2">
    Some Text
  </button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search