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

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 的更新周期同步）

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

vue + checkbox + change event - different results on page and in console

javascript

checkbox

onchange

vue.js