Vue.Js：事件触发功能的奇怪行为答案

【问题标题】：Vue.Js: strange behavior with event triggered functionVue.Js：事件触发功能的奇怪行为
【发布时间】：2021-08-23 16:22:51
【问题描述】：

我有一个带有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 };

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

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

【问题讨论】：

标签： javascript vue.js vuejs2 dom-events bootstrap-vue

【解决方案1】：

问题在于开发工具。由于您没有使用“pdServiceKey”在 dom 上执行任何操作，因此开发工具会忽略更新。如果您想查看开发工具中的更改，只需单击开发工具中的“数据”属性

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

【讨论】：

谢谢，当我在开发工具中刷新数据属性时，我可以确认pdServiceKey 的值是正确的。