如何通过按钮清除v-autocomplete选中项？内存已清但显示残留

问题原因 #

你封装的AutocompleteAtom组件内部维护了独立的select变量作为v-autocomplete的绑定值，父组件仅通过getItemSelecionado事件接收选中值，两者未建立双向绑定关系。当父组件清空自身的anoSelecionado等变量时，子组件内部的select仍保留旧值，导致视图上的选中状态无法同步更新。

解决方案 #

通过实现Vue的双向绑定语法糖，让父组件变量与子组件选中值保持同步，父组件清空变量时子组件会自动更新视图。

步骤1：修改AutocompleteAtom组件 #

调整组件的props和绑定逻辑，支持双向绑定：

<template>
<v-autocomplete
    :label="label"
    :placeholder="placeholder"
    :value="value" <!-- 用props传递的值替代内部select变量 -->
    @input="$emit('input', $event)" <!-- 触发input事件同步值到父组件 -->
    :items="items"
    :item-text="itemText"
    :disabled="disable"
    outlined
    :multiple="multiple"
    :chips="chips"
    flat
    filled
    :color="color || '#277049'"
    clearable
  >
  </v-autocomplete>
</template>
<script>
export default {
  name: "AutocompleteAtom",
  props: {
    // 新增value属性，用于接收父组件的绑定值
    value: {
      type: [String, Number, Array, Object],
      default: null
    },
    color: {
      type: String,
      default: "#277049"
    },
    label: String,
    placeholder: String,
    items: Array,
    itemText: String,
    disable: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    chips: {
      type: Boolean,
      default: false
    },
  }
}
</script>

步骤2：修改父组件的使用方式 #

直接用v-model绑定父组件变量，替代原有的事件监听：

<Autocomplete
    v-model="anoSelecionado"
    :items="anos"
    label="Ano"
    placeholder="Selecione um ano"
/>

// 清空方法保持不变，v-model会自动同步子组件的值
clear() {
  this.anoSelecionado = "";
  this.areaSelecionada = "";
  this.instituicaoSelecionada = "";
  this.tituloSelecionado = "";
  this.orientadorSelecionado = "";
  this.pesquisadorSelecionado = "";
  this.filtros = {};
},

原理说明 #

Vue的v-model本质是:value和@input的语法糖：父组件通过v-model绑定变量后，子组件的value会同步父组件的变量值；子组件触发input事件时，会自动更新父组件的变量。这样父组件清空变量时，子组件的value会同步变为空，v-autocomplete的视图也就随之清空了。

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