Element-Plus选择器默认选择最后一个选项

今天在写前端的时候碰到了一个问题， 个人用的框架是Vue3， 然后采用了Element-Plus作为组件集成， 里面使用了el-select作为下拉选框， 然后在实际过程中， 只要请求到了数据， 下拉选框默认就选择了最后一个选项， 然后设置的placeholder也未生效， 折腾了好久， 搜了一圈也没找到有同样的问题。

排查下来后发现是我model绑定的数据有问题， 应该绑定为字符串的， 但是我绑定了一个空对象， 所以导致出现了一系列的问题。

UI代码如下：

        <el-select
          v-model="selectModuleClass"
          class="m-2"
          placeholder="Select"
          size="small"
          style="width:240px"
          @change="ModuleClassChanged"
          >
            <el-option
              v-for="item in svcTypeModuleClasses"
              :key="item"
              :label="item"
              :value="item"
              ></el-option>
        </el-select>

而在初始化里面的selectModuleClass的时候， 我是按照下面这样初始化的

const selectModuleClass = ref({})

这样就导致了出现那种奇奇怪怪的问题， 关键是它的大逻辑没有错， 你选择了对应的选项后， 它依然能顺利执行， 只是初始化的时候显示异常， 只要把空对象替换成空字符串就可以了。

感觉自己在前端上，还是小白得很， 很多东西就像是一个黑盒子， 只知其然， 不知其所以然...