Checkbox does not mirror the state

[mahnunchik]

Vue version

3.5.10

Link to minimal reproduction

https://play.vuejs.org/#eNqtU8Fu2zAM/RVOl7ZAYC/odsmcYFvQw3rYhjVHAYNj04laWRIk2ctg+N9HyXaSdmtOu4l8j+R7lNSxT8YkbYNswTJXWGE8OPSNWXElaqOthw4sVtBDZXUNV0S94oqrQivnodhj8QTLwLiucunw5sMzaCNq1I1/yeCqalThhVZQSFE8Xd9AxxUMNUmbywap5M1ZSEX933Vj+6mchE8ZSi1XQ3ZsOyIvuj/L0hCAfgbzoJHGZemwEdoFBR5rI3OPFAFk+/nq/gHIqrdaSiyHIVt9yFKCIsWsNns85sF5KoZSowOlw35ytcNFloZVE7sUbTzQUeZblGNAoVCGVuh/G1xyNrXjDBbxjOWUpdTHuJbEWGxR+QCEmID02G4dqAvouljTk804JD0NzdJBy2hira3FwsMW93krtP2fksf1v6r8hL9mYGRc8pGlZ1fHZsw7urZK7JJHpxW9+/hKaKCujZBov5nwwBxnNGNoylkupf51H3PeNjib8lHCP/KPjtwu6PDdokPbImdHzOd2h2QpwHcPX/FA5yNY67KRxL4A/kCnZRM0DrTPjSpJ9hkvqv0Sf69Qu427O3hUbjIVhA4PffBNP3p9wfpJ7m3yLtbR36At/mzRhp60wNvkfTJ/y/o/rTVuJA==

Steps to reproduce

1. Create checkbox
2. Prevent default behavior by @click.prevent=
3. Change the state in the click listener check.value = !check.value;

<script setup>
import { ref } from 'vue'

const check = ref(false);
const checkTimeout = ref(false);

function click() {
  check.value = !check.value;
}

function clickTimeout() {
  setTimeout(() => {
    checkTimeout.value = !checkTimeout.value;
  }, 1);
}
</script>

<template>
  <h1>JS controlled checkbox</h1>
  <p>The checkbox state does not change:</p>
  <div>
    <label>
      <input type="checkbox" :checked="check" @click.prevent="click" />
      Check: {{check}}
    </label>
  </div>

  <p>Correct behavior:</p>
  <div>
    <label>
      <input type="checkbox" :checked="checkTimeout" @click.prevent="clickTimeout" />
      Check: {{checkTimeout}}
    </label>
  </div>
</template>

What is expected?

The checkbox reflects the state

What is actually happening?

The internal state of the checkbox is kept as is.

System Info

Any

Any additional comments?

Adding timeout fixes the issue:

  setTimeout(() => {
    checkTimeout.value = !checkTimeout.value;
  }, 1);

[mahnunchik]

For accessibility technology, a checkbox is needed. But I need to control the state of the checkbox from JS logic, without switching it automatically when clicked. It would seem that changing the state in the click handler should cause rendering, but it does not happen.

[mahnunchik]

• setTimeout(..., 0); - fixes the issue too
• nextTick() - doesn't fix it
• this.$forceUpdate() - doesn't affect at all

[edison1105]

Using pure js has the same effect, see MDN playground

[Justineo]

F.Y.I. vuejs/rfcs#188