Vue3中如何将下拉选择框选中的选项保存至API？

要获取下拉框选中项的value和text，可以通过两种简单方式实现，下面针对你的代码逐一修改：

方法一：直接绑定整个选项对象（推荐） #

这种方式能直接拿到包含value和text的完整对象，无需额外查找：

模板修改 #

给<select>添加v-model绑定，并将<option>的:value绑定为整个item：

<div>
  <select v-model="formData.choosenOption">
    <option v-for="item in subjects" :value="item" :key="item.value">
      {{ item.text }}
    </option>
  </select>
  <button @click="saveOption">Save</button>
</div>

脚本修改 #

调整formData的结构，让choosenOption存储选项对象，同时修正保存逻辑：

import { ref } from 'vue'

// 定义选项类型（如果需要）
type OptionData = {
  value: number;
  text: string;
}

const formData = ref({
  choosenOption: {} as OptionData, // 初始化为空对象，或设为默认选项如subjects.value[0]
})

const saveOption = async (): Promise<void> => {
  // 直接获取选中项的value和text
  const { value, text } = formData.value.choosenOption
  
  // 构造要提交的数据
  const submitData = {
    value,
    text
  }

  const res = await api.put(submitData, session)
  if (res.error) {
    console.log('Did not save')
    return
  }
  
  // 重置选中项
  formData.value.choosenOption = {}
}

const subjects = ref<OptionData[]>([
  { value: 1, text: 'Option 1' },
  { value: 2, text: 'Option 2' },
  { value: 3, text: 'Option 3' },
])

方法二：绑定value后手动查找text #

如果仍希望绑定单个value值，可以在保存时通过value从subjects数组中匹配对应的text：

模板修改 #

绑定v-model到单独的selectedValue字段：

<div>
  <select v-model="formData.selectedValue">
    <option v-for="item in subjects" :value="item.value" :key="item.value">
      {{ item.text }}
    </option>
  </select>
  <button @click="saveOption">Save</button>
</div>

脚本修改 #

调整formData结构并添加查找逻辑：

import { ref } from 'vue'

type OptionData = {
  value: number;
  text: string;
}

const formData = ref({
  selectedValue: 0, // 初始值设为0或第一个选项的value
})

const saveOption = async (): Promise<void> => {
  // 根据选中的value找到对应的选项对象
  const selectedItem = subjects.value.find(item => item.value === formData.value.selectedValue)
  
  if (!selectedItem) {
    console.log('No option selected')
    return
  }

  // 获取value和text
  const { value, text } = selectedItem
  
  const submitData = {
    value,
    text
  }

  const res = await api.put(submitData, session)
  if (res.error) {
    console.log('Did not save')
    return
  }
  
  // 重置选中值
  formData.value.selectedValue = 0
}

const subjects = ref<OptionData[]>([
  { value: 1, text: 'Option 1' },
  { value: 2, text: 'Option 2' },
  { value: 3, text: 'Option 3' },
])

注意事项 #

• 原代码中formData.choosenOption.subjects = ''会报错，因为choosenOption初始是字符串，无法访问subjects属性，需根据新结构调整重置逻辑。
• 给v-for添加:key可以提升渲染性能，符合Vue最佳实践。

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