VueJS表单两个独立Dropdown选择第二个时第一个自动重置问题

问题原因 #

两个核心错误导致这个现象：

• 第一个下拉框（Tenant）的循环选项没有正确绑定值：你给所有循环生成的<option>设置了固定的空字符串value=""，没有绑定租户的id属性。不管你选择哪个租户选项，formValues.tenant_id实际上都会被赋值为空字符串，只是操作当时没有触发组件重新渲染，所以视觉上暂时停留在你选的选项上。
• 当你操作第二个下拉框时，会触发组件的响应式更新，重新渲染所有DOM节点。此时Vue会根据formValues.tenant_id的实际值（空字符串）匹配对应option，刚好对应到最顶部的Select Tenant默认选项，所以视觉上就出现了第一个下拉被重置的现象。

修复方案 #

把Tenant下拉框的option行的value改为动态绑定租户id即可，修改后代码如下：

<select 
    class="form-select" 
    name="" 
    id="tenant_id"
    v-model="formValues.tenant_id" >
    <option disabled value="">Select Tenant</option>
    <!-- 这里加上v-bind缩写的:，把value和tenant.id绑定 -->
    <option :value="tenant.id" v-for="tenant in tenants" :key="tenant.id">{{tenant.tenant_name}}</option>
</select>

额外检查项 #

请确认你的Vue实例data中已经正确声明了响应式的formValues对象，避免出现响应式丢失问题，示例初始化代码：

data() {
  return {
    formValues: {
      tenant_id: '',
      chartOf: ''
    },
    tenants: [] // 你的租户列表数据
  }
}

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