Vue.js中BootstrapVue Form Select触发change事件赋值异常问题

问题核心原因 #

你当前的单文件组件写法存在错误，在<script>中直接通过new Vue()实例化了独立的Vue对象，而非导出组件配置对象，导致你赋值的pdServiceKey属于手动创建的vm实例，和当前渲染的组件实例完全无关，所以组件内读取的pdServiceKey自然是错误/未更新的。而控制台打印的是直接从pdServiceData查询到的原始正确值，不受实例逻辑影响，所以显示正常。

修复方案 #

1. 修正单文件组件的导出写法，单文件组件不需要自行实例化Vue，导出配置对象即可，同时优化查询逻辑避免重复遍历数组：

<template>
  <b-card title="Select Service:" style="max-width: 30rem;">
    <div>
      <b-form-select v-model="pdServiceName"
                    class="mb"
                    size="sm"
                    :options="pdServiceNameList"
                    @change="setService">
        <template #first>
          <b-form-select-option :value="null" disabled>
            -- Please select a PD service --
          </b-form-select-option>
        </template>
      </b-form-select>
    </div>
  </b-card>
</template>

<script>
import pdServiceData from '@/service/pd/pdSrvcData';

export default {
  data() {
    return {
      pdServiceName: null,
      pdServiceKey: null,
    }
  },
  computed: {
    pdServiceNameList() {
      return pdServiceData.map(a => a.service)
    }
  },
  methods: {
    setService() {
      // 仅查询一次，同时加边界判断避免找不到匹配项时报错
      const matchedService = pdServiceData.find(x => x.service === this.pdServiceName)
      if (matchedService) {
        console.log(this.pdServiceName)
        console.log(matchedService.key)
        this.pdServiceKey = matchedService.key
      }
    },
  }
}
</script>

2. 可选简化方案：直接让选择器绑定整个服务对象，无需额外查询匹配：

<template>
  <b-card title="Select Service:" style="max-width: 30rem;">
    <div>
      <b-form-select v-model="selectedService"
                    class="mb"
                    size="sm"
                    :options="pdServiceOptions"
                    @change="setService">
        <template #first>
          <b-form-select-option :value="null" disabled>
            -- Please select a PD service --
          </b-form-select-option>
        </template>
      </b-form-select>
    </div>
  </b-card>
</template>
<script>
import pdServiceData from '@/service/pd/pdSrvcData';

export default {
  data() {
    return {
      selectedService: null
    }
  },
  computed: {
    pdServiceOptions() {
      return pdServiceData.map(item => ({
        text: item.service,
        value: item
      }))
    }
  },
  methods: {
    setService() {
      if (this.selectedService) {
        console.log(this.selectedService.service, this.selectedService.key)
      }
    }
  }
}
</script>

补充排查点 #

如果修正写法后仍有问题，请检查pdServiceData是否存在service字段重复的条目，Array.find只会返回第一个匹配的元素，会导致后续相同service的条目返回的key不符合预期。

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