How to uncheck a checkbox bound to a vuex store state array item?

Question

I'm working on a feature wherein users have a list of priorities and they can mark priorities as completed by checking a checkbox (image below for reference).

list of priorities with checkbox

Before proceeding to complete/finish a priority, I ask for a confirmation using a dialog box. Users can click "ok" to proceed or "cancel" to close the dialog box and not proceed with the action. I have completed the "ok" part, but for "cancel", I need the checkbox to remain unchecked (or at least make it look like it remained unchecked). To handle this, I pass the $event object to the @change event handler and set the target value to false when the dialog box is cancelled: evt.target.value = false;

I'm skeptical about this solution, because I don't think it's correct to set the value of the event target in the view model, but I can't think of a different way. Is there another way to handle this scenario?

My template/code is something like this (simplified):

<ul>
  <li :key="item.id" v-for="(item, index) in priorities">
    <div>
      <input
        type="checkbox"
        :checked="item.isCompleted"
        @change="handleComplete(item, $event)"
      />
      <div>
        <a href="#">{{ item.title }}</a>
        <p class="subtitle is-7">{{ item.targetDateTime | short }}</p>
      </div>
    </div>
    <button>
      <fa :icon="['fas', 'minus-circle']" />
    </button>
  </li>
</ul>

export default {
  name: "PriorityList",
  computed: {
    ...mapState({
      priorities: state => state.priorities
    }),
  },
  methods: {
    ...mapActions({
      confirmComplete: "confirmComplete"
    }),
    handleComplete(priority, evt) {
      this.$buefy.dialog.confirm({
        title: "Confirm",
        message: "This action cannot be undone from the priorities list. Do you want to continue?",
        type: "is-danger",
        size: "is-small",
        onConfirm: async () => {
            // item.isCompleted is mutated in the confirmComplete() action
            await this.confirmComplete(priority);
        },
        onCancel: () => {
            // TODO: A different solution to uncheck checkbox
            evt.target.value = false; // current solution
        }
      });
    },
  }
};

Note: I'm not using v-model in the checkbox since it's bound to an array item from a vuex store which will throw an error (do not mutate a state outside a mutation) when the checkbox value changes.

Answer 1

binding to the input with v-model

  <input
    type="checkbox"
    :value="item.isCompleted"
    @input="handleComplete(index)"
      />

handle checkbox state change with method

handleComplete(index) {
      this.$buefy.dialog.confirm({
        title: "Confirm",
        message: "This action cannot be undone from the priorities list. Do you want to continue?",
        type: "is-danger",
        size: "is-small",
        onConfirm: async () => {
            // I suppose this is mutating the state and that the store will get updated automatically then
            await this.confirmComplete(this.priorities[index]);
        },
        onCancel: () => {
            // TODO: use store actions to mutate state
            this.priorities[index] = false
        }
      });
    },

Main part was about the template binding