Skip to content

phptechs/vue-v-model

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

v-model docs

text types (text, password, textarea)

Uses value property and @input event

Native element

<!-- shorthand -->
<input v-model="something" />
<!-- expanded -->
<input :value="something" @input="something = $event.target.value" />

Parent-child

<!-- parent -->
<Child v-model:something="something"></Child>
<!-- child -->
<input :value="something" @input="$emit('update:something', $event.target.value)" />

Checkbox and radio

Uses checked property and @change event

Native element

<!-- shorthand -->
<input type="checkbox" v-model="something" />
<!-- expanded -->
<input type="checkbox" :checked="something" @change="something = $event.target.checked" />

Parent-child

<!-- parent -->
<Child v-model:something="something"></Child>
<!-- child -->
<input type="checkbox" :checked="something" @change="$emit('update:something', $event.target.checked)" />

Select

Uses value property and @change event

Native element

<!-- shorthand -->
<select v-model="something">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<!-- expanded -->
<select :value="something" @change="something = $event.target.value" />

Parent-child

<!-- parent -->
<Child v-model:something="something"></Child>
<!-- child -->
<select :value="something" @change="$emit('update:something', $event.target.value)" />