Vue.js Form Handling

Working with forms and inputs in Vue

Text Input

<input v-model="message" /> # two-way binding
<textarea v-model="message"></textarea> # textarea

Checkbox

<input type="checkbox" v-model="checked" /> # single checkbox (boolean)
<input type="checkbox" value="A" v-model="selected" /> # multiple (array)

Radio

<input type="radio" value="A" v-model="picked" />
<input type="radio" value="B" v-model="picked" />

Select

<select v-model="selected">
    <option>A</option>
    <option>B</option>
</select>

Form Submit

<form @submit.prevent="onSubmit"> # prevent default
    <button type="submit">Submit</button>
</form>