Vuetify v-data-table header customization-CodePudding

I have customized the v-data-table header with text-field for searching to make the function compact. But I can not prevent the sort click function on text-field.

Step to Reproduce:

<div id="app">
    <v-app>
      <v-main>
        <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    
  >
    <template v-slot:header.calories="{ header }">
          <v-text-field label="search calories"></v-text-field>
    </template>
  </v-data-table>
      </v-main>
    </v-app>
  </div>

Please click this Codepen link Please click on search calories one to two times, it sorts asc or desc.

I want to stop the sort function only on the header text or custom text-field, because there is a sort icon right side of it.

CodePudding user response：

Put a @click.stop on the v-text-field:

<template v-slot:header.calories="{ header }">
  <v-text-field label="search calories" @click.stop />
</template>

This will stop the click event from propagating into the header.