Vue.js中v-model使用时机及下拉框选中失效问题咨询

你的问题核心原因 #

你遇到的问题是v-model会覆盖<option>的selected属性——Vue中v-model的优先级高于原生的selected属性，当你给select加上v-model后，选中状态完全由绑定的sel_kod_negara变量的值决定，而不是你写在option上的selected属性。如果初始化时sel_kod_negara不等于selected.di_kod_negara，就会出现选中项不显示的情况；去掉v-model后，浏览器会按原生规则使用option的selected属性展示选中项。

何时应该使用v-model？ #

• 需要双向绑定表单数据时：比如你要实时获取用户选择的国家编码，或者后续需要通过代码（比如接口返回数据）修改下拉框的选中状态，这时候必须用v-model。它是Vue专为表单控件设计的语法糖，帮你省去手动监听change事件、手动赋值的繁琐操作。
• 表单提交场景：只要涉及收集用户输入/选择的表单，v-model几乎是标配，能让你轻松把表单值同步到Vue的响应式变量里，方便后续提交或处理。

不使用v-model是否会有问题？ #

• 如果只是纯静态展示选中状态，不需要获取用户选择的值，也不需要通过代码动态修改选中项，那不用v-model完全没问题，就像你现在的情况一样能正常显示。
• 但如果需要和Vue的数据联动（比如获取用户选择、动态修改选中项），不用v-model的话，你得自己写@change事件监听选择变化，还要手动操作DOM来设置选中状态，代码会更冗余，也容易和Vue的响应式机制冲突，增加出错概率。

解决你的代码问题 #

要让v-model生效同时正确显示选中项，只需要两步：

1. 初始化sel_kod_negara为正确的选中值
   在Vue的data或mounted钩子中，把sel_kod_negara赋值为selected.di_kod_negara：

data() {
  return {
    sel_kod_negara: '',
    selected: {}, // 假设这是你从后端拿到的已选中数据
    kod_negara: [],
    error: {}
  }
},
mounted() {
  // 从后端获取selected数据后，同步到sel_kod_negara
  this.sel_kod_negara = this.selected.di_kod_negara;
}

2. 去掉<option>上的selected属性
   因为v-model已经会控制选中状态，原生的selected属性可以删除：

<div class="input-group mb-3" style="width: 500px;">                                    
  <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa-solid fa-location-dot"></i></span>
  </div>
  <select class="form-control" v-model="sel_kod_negara" :class="{'is-invalid': error.kod_negara}">
        <option value="">-Select Country-</option>
        <option :value="selected.di_kod_negara">{{selected.keterangan}}</option>
        <option :value="r.kod" v-for="r in kod_negara" :key="r.kod">{{r.keterangan}}</option>
  </select>
</div>

另外给v-for循环的option加上:key属性，符合Vue的性能优化规范。

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