CODEWITHSUNDEEP
javascriptvue.jscheckboxonchange
Mikk
Mikk

Reputation: 193

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

I have an issue I can't understand and solve. I have simple page in vue - set of checkboxes bound via v-model to array. This is how it looks like:

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

Nothing difficult, as you can see.

It works great on the screen - {{ selectedFruits }} are displayed correctly. But when I check the value of selectedFuits in console I see different results than displayed - console shows "one click late" results. Can you explain the issue and direct me, how to solve it, please?

Upvotes: 0

Views: 4776

Answers (1)

Matt
Matt

Reputation: 44068

I think you're dumping the value right before Vue updates it. If you want to be in sync with Vue, you should watch the variable instead of implementing your own @change:

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

...

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

You could also probably use Vue.nextTick(() => console.log(this.selectedFruits)) with your current code, but still, when you're using v-model, I think you should not implement your own events for the same thing.

(an aside: v-model just listens for @input - it's possible b-form-checkbox-group just emits this before emitting @change. with watch, you don't have to care about this kind of detail because it is synced with Vue's update cycle)

Upvotes: 1

Related Questions