uviw-plus+vue3+js下拉选中数据没有回显

Question

uviw-plus+vue3+js下拉选中数据没有回显

<template>
  <view class="wrap">
    <view class="form-box">
      <view class="item">
        <text>访客姓名 *</text>
        <up-input v-model="form.name" placeholder="请输入姓名" clearable />
      </view>

      <view class="item">
        <text>手机号码 *</text>
        <up-input v-model="form.phone" placeholder="请输入手机号" clearable />
      </view>

      <view class="item">
        <text>身份证号</text>
        <up-input v-model="form.idCard" placeholder="请输入身份证号" clearable />
      </view>

      <view class="item">
        <text>受访人 *</text>
        <up-select
          v-model="form.interviewee"
          :options="intervieweeList"
          placeholder="请选择受访人"
          clearable
          :popup-style="{ zIndex: 9999 }"
          value-key="id"
          label-key="name"
                    @select="selectItem"
        />
      </view>

      <view class="item">
        <text>来访目的</text>
        <up-input v-model="form.purpose" placeholder="请输入来访目的" clearable />
      </view>
    </view>

    <up-button type="primary" @click="submit">提交登记</up-button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const intervieweeList = ref([
  { id: '1', name: '张三' },
  { id: '2', name: '李四' },
  { id: '3', name: '王五' },
])

const form = ref({
  name: '',
  phone: '',
  idCard: '',
  interviewee: '',
  purpose: ''
})
function selectItem(v){
    console.log("scisnciosancoo",v)
}
const submit = () => {
  if (!form.value.name || !form.value.phone || !form.value.interviewee) {
    uni.showToast({ title: '请填写完整', icon: 'none' })
    return
  }
  console.log('提交表单：', form.value)
  uni.showToast({ title: '登记成功', icon: 'success' })
}
</script>

<style scoped>
.wrap { padding: 30rpx; }
.form-box { background: #fff; padding: 40rpx; border-radius: 20rpx; }
.item { margin-bottom: 30rpx; }
.item text { font-size: 28rpx; margin-bottom: 12rpx; display: block; }
up-button { margin-top: 30rpx; }
</style>

Answer 1

下午好🌅🌅🌅
本答案参考通义千问

在使用 uView Plus（uviw-plus）结合 Vue3 + JS 开发时，下拉选择器 up-select 的选中数据没有回显的问题，通常是由于以下原因导致的：

1. v-model 绑定值与选项值不匹配
2. value-key 和 label-key 配置错误
3. 未正确初始化表单数据或未绑定事件

---

问题分析

从你提供的代码来看，up-select 组件的 v-model="form.interviewee" 是用来绑定表单中的 interviewee 字段。但是，在 intervieweeList 中，每个选项都有一个 id 字段作为唯一标识符，而 form.interviewee 初始值是空字符串。

如果 intervieweeList 中的数据格式为 { id: '1', name: '张三' }，那么 form.interviewee 应该是一个 字符串类型的 ID，而不是对象。

因此，如果用户选择了某个选项，但 form.interviewee 没有被赋值，可能是由于 up-select 组件没有正确地将选项的 id 值绑定到 form.interviewee 上。

---

解决方案

✅ 1. 确保 value-key 正确设置为 id

确保 up-select 组件的 value-key 属性设置为 "id"，这样组件就知道应该使用选项的 id 作为值进行绑定。

<up-select
  v-model="form.interviewee"
  :options="intervieweeList"
  placeholder="请选择受访人"
  clearable
  :popup-style="{ zIndex: 9999 }"
  value-key="id"   <!-- ✅ 确保此属性正确 -->
  label-key="name"
  @select="selectItem"
/>

---

✅ 2. 表单数据初始值应为字符串类型

form.interviewee 应该是一个字符串，而不是对象。当前你的 form 初始化是正确的：

const form = ref({
  name: '',
  phone: '',
  idCard: '',
  interviewee: '',  <!-- ✅ 正确：字符串类型 -->
  purpose: ''
})

---

✅ 3. 确保 up-select 的 @select 事件不会干扰 v-model

目前你在 @select="selectItem" 中只是打印了日志，没有对 form.interviewee 进行任何操作，这是可以接受的。但如果在 selectItem 中修改了 form.interviewee，可能会覆盖 v-model 的绑定。

建议保留 @select 事件，但不要在其中直接修改 form.interviewee，除非有特殊需求。

---

✅ 4. 确保 intervieweeList 数据结构正确

检查 intervieweeList 是否包含 id 和 name 字段：

const intervieweeList = ref([
  { id: '1', name: '张三' },
  { id: '2', name: '李四' },
  { id: '3', name: '王五' },
])

这个是正确的，不需要修改。

---

✅ 完整修正后的代码如下：

<template>
  <view class="wrap">
    <view class="form-box">
      <view class="item">
        <text>访客姓名 *</text>
        <up-input v-model="form.name" placeholder="请输入姓名" clearable />
      </view>

      <view class="item">
        <text>手机号码 *</text>
        <up-input v-model="form.phone" placeholder="请输入手机号" clearable />
      </view>

      <view class="item">
        <text>身份证号</text>
        <up-input v-model="form.idCard" placeholder="请输入身份证号" clearable />
      </view>

      <view class="item">
        <text>受访人 *</text>
        <up-select
          v-model="form.interviewee"
          :options="intervieweeList"
          placeholder="请选择受访人"
          clearable
          :popup-style="{ zIndex: 9999 }"
          value-key="id"
          label-key="name"
          @select="selectItem"
        />
      </view>

      <view class="item">
        <text>来访目的</text>
        <up-input v-model="form.purpose" placeholder="请输入来访目的" clearable />
      </view>
    </view>

    <up-button type="primary" @click="submit">提交登记</up-button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const intervieweeList = ref([
  { id: '1', name: '张三' },
  { id: '2', name: '李四' },
  { id: '3', name: '王五' },
])

const form = ref({
  name: '',
  phone: '',
  idCard: '',
  interviewee: '',
  purpose: ''
})

function selectItem(v) {
  console.log("选中项:", v)
}

const submit = () => {
  if (!form.value.name || !form.value.phone || !form.value.interviewee) {
    uni.showToast({ title: '请填写完整', icon: 'none' })
    return
  }
  console.log('提交表单：', form.value)
  uni.showToast({ title: '登记成功', icon: 'success' })
}
</script>

<style scoped>
.wrap { padding: 30rpx; }
.form-box { background: #fff; padding: 40rpx; border-radius: 20rpx; }
.item { margin-bottom: 30rpx; }
.item text { font-size: 28rpx; margin-bottom: 12rpx; display: block; }
up-button { margin-top: 30rpx; }
</style>

---

✅ 总结

• value-key 必须设置为 "id"
• form.interviewee 应为字符串类型
• @select 事件中不要手动修改 form.interviewee
• intervieweeList 数据格式必须包含 id 和 name

通过以上步骤，你应该能解决 up-select 下拉选中数据无法回显的问题。