vue.js - vuetify：为什么每当用户点击输入字段时对表格进行排序

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，但还是一样。请看一下。任何帮助，将不胜感激。 代码笔

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>