If you're just getting started with this series of Vue.js posts, you should start with the Vue.js Starter Page.
Forms will forever be an obvious element of any web application, since collecting and saving data continues to drive many businesses. Vue.js offers a lot in the way of form creation that will save you time and enhance your forms functionality. In this post we'll work with select (checkbox) form fields and see what Vue.js can do to help your form creation efforts.
<!doctype html>
<html>
<head><meta charset="UTF-8"><title>VueJS</title>
<script src="https://unpkg.com/vue@2.3.0"></script>
</head>
<body>
<div id="app">
<form>
Email: <input type="text" name="email" v-model="yourEmail"><br>
<!-- example of 2 way data binding using the newEmail value from above. Changes are reflected immediately because field is responding to input event. Add ".lazy" to have it respond to the change event -->
<fieldset>
<legend>Sport Interests</legend>
<div>
<input type="checkbox" value="Goalie" v-model="sportInterests">Goalie
</div>
<div>
<input type="checkbox" value="Forward" v-model="sportInterests">Forward
</div>
<div>
<input type="checkbox" value="Winger" v-model="sportInterests">Winger
</div>
<input type="submit" value="Register">
<p>Your selected sport interests include: {{sportInterests.join(', ')}}</p>
</fieldset>
</form>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data: {
newEmail: 'rich@cfsnap.com',
sportInterests: []
}
})
</script>
</html>