Блог

Я изо всех сил пытаюсь выяснить, почему функция updateOptions() запускается дважды в приведенном ниже простом примере. Я смог определить (просто войдя в журнал), что событие @change в заголовке компонента для фильтрации по заголовку запускается первым, а затем родительский элемент запускает параметры @update:. Чтобы сохранить приведенный ниже код exmaple как можно более простым, я удалил все остальное, что, по-моему, не является проблемой

  <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>
 

Может ли кто-нибудь помочь мне понять, почему это происходит и как предотвратить запуск события родительским компонентом

Овации

Причина @update:options="updateOptions" срабатывания заключается в том, что объект options содержит информацию о заголовках, как вы можете видеть в документации здесь

И вот как решить эту проблему

Вы можете поместить модификатор .stop в ComponentToFilterByHeader дочерний компонент

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

Надеюсь, это сработает!