vuetify：为什么每当用户点击输入字段时 table 都会被排序

Question

我有一个 vuetify 数据表，最初的解决方案是为每一列使用 v-for 动态分配搜索文本字段，然后实现多过滤器。以下是我的解决方案：

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

问题是每当用户单击特定列的文本字段时，排序功能也会同时运行。我在以下具有相同行为的笔上有一个微型解决方案。我试着在模板标签后面放一个 div 但还是一样。请看一下。任何帮助，将不胜感激。 Code Pen

Answer 1

用 DIV 包裹文本字段并附加一个空处理程序以防止冒泡 CLICK 事件：

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

vuetify：为什么每当用户点击输入字段时 table 都会被排序

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

vue.js

vuetify.js

vuetify-datatable