Vue +复选框+更改事件-页面和控制台中的结果不同

问题描述

我有一个无法理解和解决的问题。 我在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的值时，我看到的结果与显示的结果不同-控制台显示“一键延迟”结果。 您能解释这个问题并指导我，如何解决？

解决方法

我认为您是在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模型时，我认为您不应该为同一件事实现自己的事件。

（顺便说一句：v模型仅侦听@input-有可能b-form-checkbox-group仅在发出@change之前发出此消息。使用watch，您不必关心此类细节，因为它与Vue的更新周期保持同步