使用了纯vue3写法写了个下拉框，出现了个莫名其妙的bug，就是下拉选中后无效。

示例：

 代码：

<template>
  <el-card class="box-card">
    <div class="filter-box">
      <el-form :model="form" :inline="true"  ref="form" label-width="120px">
        <el-form-item label="所属标段">
          <el-select v-model="form.name" @change="fn" placeholder="请选择标段" >
            <el-option
              v-for="item in affiliationList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button @click="clear">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>


<script  setup>
import { ref, onMounted, reactive } from "vue";

const form = reactive({
  name:0,
})
const fn=()=>{
  console.log(form,'form');
}
const affiliationList=[
  {label:'社区标段',value:0},
  {label:'街道标段',value:1},
  {label:'区域标段',value:2},
]
// 重置按钮
const clear=()=>{
  form={}
}
onMounted(() => {});
</script>

<style  scoped>
.filter-box {
  display: flex;
  justify-content: space-between;
}
</style>

下拉框选中后就是无法回显，打印出来的form对象也没有选中的数据。

打印：

 解决方案：就是form的model变量名和ref的名字重复了，把两个其中一个改下就好了，保证不重名。

 总结：form的model和ref重名会出现很多奇奇怪怪的bug  大概是冲突吧  但是这个问题在vue

2是没有遇到过的。