b-form-select组件v-model变更后选中值未同步问题求助

你的问题核心是v-model绑定的值类型和b-form-select期望的类型不匹配：组件通过value-field="Livreur"指定了用对象的Livreur字段作为选项值，因此v-model应该绑定该字段的字符串值，而非整个对象。

具体修正步骤 #

1. 修正v-model赋值逻辑
   不要直接赋值整个对象，而是取对象中value-field对应的属性值：

   // 原错误写法
   // this.Depart = this.ListA[0]
   // 修正后
   this.Depart = this.ListA[0].Livreur
   

2. 修正data的语法错误
   Vue的data选项需要返回一个对象，你的代码缺少return和正确的结构：

   data() {
     return {
       Depart: '',
       ListA: []
     }
   }
   

3. 确保方法在Vue的methods中定义
   函数需要放在组件的methods选项里，才能正确访问this：

   methods: {
     setDepart() {
       // 先判断列表非空，避免报错
       if (this.ListA.length > 0) {
         this.Depart = this.ListA[0].Livreur
       }
     }
   }
   

完整修正后的代码示例 #

<template>
  <b-form-select 
    :options="ListA" 
    v-model="Depart" 
    value-field="Livreur" 
    text-field="Livreur"
  ></b-form-select>
</template>

<script>
export default {
  data() {
    return {
      Depart: '',
      ListA: []
    }
  },
  mounted() {
    // 模拟数据加载
    this.ListA.push({ Livreur: "example", id: 0 })
    // 调用方法设置选中值
    this.setDepart()
  },
  methods: {
    setDepart() {
      if (this.ListA.length > 0) {
        this.Depart = this.ListA[0].Livreur
      }
    }
  }
}
</script>

额外说明 #

如果你的需求是让v-model绑定整个选项对象（而非单个字段），可以直接去掉value-field属性，此时b-form-select会将整个对象作为v-model的值，你的原赋值逻辑this.Depart = this.ListA[0]就会生效。

内容的提问来源于stack exchange，提问作者el alouchi mouhcine