Tengo un programa vue.js simple con un componente Form Select BootstrapVue.

 <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'; var vm = new Vue({ data: { pdServiceName: null, pdServiceKey: null, }, computed: { pdServiceNameList: () => pdServiceData.map((a) => a.service), }, methods: { setService() { console.log(this.pdServiceName); console.log(pdServiceData.find((x) => x.service === this.pdServiceName).key); this.pdServiceKey = pdServiceData.find((x) => x.service === this.pdServiceName).key; }, } }); </script>

pdSrvcData.js:

 const pdServiceData = [ { service: 'srvc_telemetry_staging_alarm', key: 'P6RHJHY' }, { service: 'srvc_telemetry_wwe_staging_alarm', key: 'PI2UID2' }, ]; export { pdServiceData as default };

Cuando selecciono las opciones del componente Form Select , se activará el método setService() , pero descubrí que el pdServiceKey calculado será incorrecto, mientras que si imprimo el valor en la consola al mismo tiempo, las impresiones serán correctas :

¿Alguien tiene alguna idea de por qué sucede esto?