Vue.Js: strange behavior with event triggered function

Question

I have a simple vue.js program with a Form Select BootstrapVue component.

<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 };

When I select the options from the Form Select component, the method setService() will be triggered, but I found that the pdServiceKey calculated will be wrong, while if I print the value out to console at the same time, the printouts will be correct:

Anyone has any idea why this happens?

Answer 1

problem is with the dev-tools. as you didn't use 'pdServiceKey' to do anything on the dom, dev-tools ignores the update. if you want to see the change in dev-tools just click on the 'data' property in dev-tools

ref: https://github.com/vuejs/vue-devtools/issues/41#issuecomment-162675083