v-model under the hood
// with v-model
<input v-model="email" class="form-input" placeholder="you@example.com">
// without v-model
<input :value="email" @input="email = $event.target.value" class="form-input" placeholder="you@example.com">
data() {
return {
email: 'test@test.com'
}
}
// Controlled Componenet
- The value, or state, of the input is controlled by the parent
- A component that doesn't have any of its own state, but is controlled by state in the parent
- it communicates with the parent by firing events anytime the user has tried to change the value of the component