Event is triggerd twice - by child and parent

Question

I am struggeling to find out why the updateOptions() function is triggered twice on the simple example below. I was able to identify (simply by logging) that the @change-event in the component-to-filter-by-header is fired first then the @update:options is fired by the parent. To keep the exmaple code below as simple as possible I removed everything else which I think is not the problem

 <v-data-table
     @update:options="updateOptions"  // parent event triggered (should not happen)
 >
     <template v-slot:[`header.book`]>
         <component-to-filter-by-header
             @change="updateOptions(...);" // child event triggered
         />
     </template>
     ...
</v-data-table>

Can someone help me understand why this is happening and how to prevent the parent component to fire its event

Cheers

Answer 1

The reason @update:options="updateOptions" is triggered is because options object has headers information as you can see the documentation here

And here is how to resolve the problem

You can put .stop modifier in the ComponentToFilterByHeader child component

<template>
  <div>
    <v-btn @click.stop="$emit('change')">click</v-btn>
  </div>
</template>

Hope this works!