vuetify: why the table is sorted whenever the user clicks into the input field

Question

I have a vuetify datatable, the original solution is dynamic allocation of search text field using v-for for each of the column and then multi filter is implemented. following is my solution:

        <template v-for="(header, i)  in columns" v-slot:[`header.${header.value}`]="{  }"> 
         {{ header.text }}
            <v-text-field :key="i"
              v-model="multiSearch[header.value]"
              class="pa"
              type="text"
              :placeholder="header.value"
              prepend-inner-icon="mdi-magnify"
            ></v-text-field>
        </template>

The problem is whenever an user clicks on the text field of a particular column, the sorting function also runs at the same time. I have a miniature solution on the following pen which has the same behaviour. I tried to put one div after template tag but still the same. Kindly have a look at it. Any help would be appreciated. Code Pen

Answer 1

Wrap the text field with a DIV and attach an empty handler to prevent the bubbling of CLICK events:

 <template v-for="(header, i)  in columns" v-slot:[`header.${header.value}`]="{  }"> 
         {{ header.text }}
         <div @click.stop>
            <v-text-field :key="i"
              v-model="multiSearch[header.value]"
              class="pa"
              type="text"
              :placeholder="header.value"
              prepend-inner-icon="mdi-magnify"
            ></v-text-field>
         </div>
 </template>