Vue 3组合式API中vue-select选中值获取与函数调用异常问题

先纠正几个关键错误：

• vue-select的@change事件传递的参数是选中的完整选项对象，不是DOM Event对象，无需访问event.target
• 组合式API中，响应式变量和方法必须在setup()中return，才能被模板调用
• 推荐用v-model做双向绑定，这是vue-select的标准用法，比:value单向绑定更适配组件逻辑

正确实现代码 #

模板部分 #

<v-select 
  v-model="selected" 
  :options="getAllItems" 
  label="name" 
  @change="handleSelect"
></v-select>

脚本部分（组合式API） #

import { ref } from 'vue'
import vSelect from 'vue-select' // 确保导入适配Vue3的组件版本

export default {
  components: {
    vSelect
  },
  setup() {
    // 初始化选中值，默认可设为空或指定默认选项
    const selected = ref(null)
    // 替换为你实际的选项数据逻辑
    const getAllItems = ref([
      { id: 1, name: '选项1', desc: '描述信息1' },
      { id: 2, name: '选项2', desc: '描述信息2' }
    ])

    // 接收选中的完整选项对象，执行表格添加行逻辑
    const handleSelect = (selectedItem) => {
      console.log('选中的完整信息:', selectedItem)
      // 这里调用你的表格添加行函数，比如：
      // addTableRow(selectedItem)
    }

    // 必须return模板需要访问的变量和方法
    return {
      selected,
      getAllItems,
      handleSelect
    }
  }
}

额外说明 #

• 若坚持用:value单向绑定，需配合@input事件手动更新selected值，@change事件仍会传递选中的选项对象
• 确保getAllItems是响应式的（用ref/reactive包裹），这样选项变化时组件能自动更新

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