Subscribe on changes!

A checkbox with `:checked="true"` ( controlled checkbox ) doesn't work

avatar
Jun 9th 2022

Vue version

3.2.27

Link to minimal reproduction

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aW5wdXQgdHlwZT1cImNoZWNrYm94XCIgOmNoZWNrZWQ9XCJ0cnVlXCIgLz5cbjwvdGVtcGxhdGU+IiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwidnVlXCI6IFwiaHR0cHM6Ly9zZmMudnVlanMub3JnL3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCIsXG4gICAgXCJ2dWUvc2VydmVyLXJlbmRlcmVyXCI6IFwiaHR0cHM6Ly9zZmMudnVlanMub3JnL3NlcnZlci1yZW5kZXJlci5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0ifQ==

Steps to reproduce

<template>
  <input type="checkbox" :checked="true" />
</template>

What is expected?

The checkbox should be always checked because prop checked is always true

What is actually happening?

The checkbox is unchecked after I click it

System Info

N/A

Any additional comments?

The same behavior for

  1. <input value.prop="test" />
  2. <input type="range" :value.prop="10" />

Nothing works

avatar
Jun 9th 2022

It’s expected as Vue doesn’t support fully controlled native inputs. There’s already an RFC about this here.