V-checkbox input-value on change not working as expected

Question

Template:

<template #[`${instanceItemIdKey}`]="{ item }">
 <v-checkbox
    :input-value="item.value"
    @change="$emit('onPermissionChange', item)"
  ></v-checkbox>
</template>

The data which gives me item is passed through props. The item is dynamic (so I can't use the computed setter). When change is fired it runs vuex action and the mutates the state (I've checked item.value inside vuex-dev-tools and the values are right). BUT the checked state is not changed. How can I change the checked state based on item.value without using v-model?

@GirlCodes, of course, but it's not working with the :value at all — Alopwer
Try @click.capture and remove every other event on the checkbox — Girl Codes

Girl Codes Girl Codes · Accepted Answer · 2021-04-22T16:00:12

I tried in codepen and this worked:

<v-checkbox
    :input-value="item.value"
            @click="changeValue"
  ></v-checkbox>

methods: {
   changeValue: function(e) {
      e.stopPropagation()
      this.callToServer().then(() =>{
          this.item.value = !this.item.value;
      })
      .catch((error) => {
            console.log(error)
        });
    },
}

V-checkbox input-value on change not working as expected

2 Answers