VueJS & Vuetify：V-select outlined标签未固定在边框上的问题咨询

原因 #

Vuetify 中variant="outlined"的v-select（多选模式下）默认交互逻辑为：当组件未选中任何值时，标签会显示在输入框内部；只有当组件获得焦点或存在选中值时，标签才会移动到边框上方位置。这是组件自带的默认行为。

解决方案 #

给v-select添加persistent-label属性，即可让标签始终固定在输入框边框上方，不会因无选中值而沉到输入框内。

修改后的代码如下：

<template>
  <v-row>
    <v-col cols="12">
      <v-card color="white" variant="elevated">
        <v-form id="frmFilter" class="ma-md-3">
          <v-row class="ma-2 ga-3">
            <v-select
              label="Organismes"
              :items="items"
              multiple
              variant="outlined"
              density="compact"
              persistent-label <!-- 新增属性 -->
            ></v-select>
            <v-btn density="comfortable" type="submit" color="light-blue-darken-4">Filtrer</v-btn>
            <v-btn density="comfortable" type="submit">Réinitialiser</v-btn>
          </v-row>
        </v-form>
      </v-card>
    </v-col>
  </v-row>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    items: ['Blue', 'Red', 'Yellow', 'Green'],
  }),
};
</script>

效果说明 #

添加persistent-label后，无论v-select是否有选中值、是否获得焦点，标签都会保持在输入框边框的上方位置，与你期望的初始状态一致。

内容的提问来源于stack exchange，提问作者lasnico37