Vue.Js：事件触发函数的奇怪行为

Question

我有一个带有 Form Select BootstrapVue 组件的简单 vue.js 程序。

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

当我select从Form Select组件中选择选项时，会触发方法setService()，但是我发现pdServiceKey计算的会出错，而如果我同时将值打印到控制台，打印输出将是正确的：

有人知道为什么会这样吗？

Answer 1

问题出在开发工具上。因为您没有使用 'pdServiceKey' 在 dom 上执行任何操作，开发工具会忽略更新。如果您想查看开发工具中的更改，只需单击开发工具

中的 'data' 属性

参考：https://github.com/vuejs/vue-devtools/issues/41#issuecomment-162675083

Vue.Js：事件触发函数的奇怪行为

Vue.Js: strange behavior with event triggered function

javascript

dom-events

vue.js

vuejs2

bootstrap-vue