vue + checkbox + change event - 页面和控制台上的不同结果

Question

我有一个我无法理解和解决的问题。 我在 vue 中有一个简单的页面 - 一组通过 v-model 绑定到数组的复选框。 看起来是这样的：

<template>
  <div id="app">
    <b-form-checkbox-group
      switches
      stacked
      v-model="selectedFruits"
      :options="options"
      @change="selectionChanged"
    >
    </b-form-checkbox-group>
    {{ selectedFruits }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      selectedFruits: [],
      options: [
        {
          text: 'Apple',
          value: {id: 1, val: 'apple'},
        },
        {
          text: 'Banana',
          value: {id: 2, val: 'banana'},
        },
        {
          text: 'Pear',
          value: {id: 3, val: 'pear'},
        },
        {
          text: 'Plum',
          value: {id: 4, val: 'plum'},
        }
      ]
    }
  },
  methods: {
    selectionChanged() {
      console.log(this.selectedFruits);
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

如您所见，没什么难的。

它在屏幕上效果很好 - {{ selectedFruits }} 显示正确。 但是，当我在控制台中检查 selectedFuits 的值时，我看到的结果与显示的不同 - 控制台显示“一键延迟”结果。 请您解释一下问题并指导我，如何解决？

Answer 1

我认为您在 Vue 更新它之前就丢弃了该值。如果你想与 Vue 同步，你应该watch 变量而不是实现你自己的@change：

<b-form-checkbox-group
  switches
  stacked
  v-model="selectedFruits"
  :options="options"
>

...

watch: {
  selectedFruits(val) {
    console.log(val); // or this.selectedFruits
  }
}

您也可以在当前代码中使用Vue.nextTick(() => console.log(this.selectedFruits))，但是，当您使用 v-model 时，我认为您不应该为同一件事实现自己的事件。

（旁白：v-model 只监听@input - 有可能b-form-checkbox-group 只是在发出@change 之前发出它。使用watch，你不必关心这种细节，因为它与 Vue 的更新周期同步）