聚焦时将当前选中项填充至v-select搜索框的实现问题

vue-select默认选中选项后会清空搜索框显示占位符，要实现组件获得焦点时将选中项填充到搜索框，不能直接用:search或:autocomplete prop绑定——这两个prop是单向数据流，组件内部逻辑会覆盖它们的值。正确做法是通过组件实例手动控制搜索框内容：

步骤1：给v-select添加ref引用 #

<vSelect
  ref="addressSelect"
  v-if="addressSuggestions"
  v-model="checkoutStore.selectedAddress"
  label="tekst"
  :options="addressSuggestions"
  @focus="fillSearchWithSelected"
  <!-- 可选：如果需要选中后立即填充，添加input事件监听 -->
  @input="fillSearchWithSelected"
  ...
/>

步骤2：实现填充逻辑 #

在组件的methods中添加处理函数，通过ref获取组件实例，直接修改内部的search属性：

methods: {
  fillSearchWithSelected() {
    const selectedText = this.checkoutStore.selectedAddress?.tekst;
    // 确保选中项存在且组件实例可访问
    if (selectedText && this.$refs.addressSelect) {
      this.$refs.addressSelect.search = selectedText;
    }
  }
}

关键说明 #

• :search prop是单向绑定，组件内部在选中选项、清空选项等操作时会自动重置search值，直接绑定不会生效；
• 通过组件实例的search属性修改，是直接操作组件内部状态，能覆盖默认的清空逻辑；
• 如果需要在选中选项后立即让搜索框显示选中值，加上@input事件监听即可。

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