V. Vue.js and Coldfusion: Forms

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.

Take a Look

  • Don't forget the Vue.js library reference in the script tag on line 4....
  • ... and line 9 is pretty important too.
  • Finally, you have to add a sportInterests data element to the Vue.js data object in the Vue.js instance (see code below).

Let's Tie It All Together

The sportInterests data set is actually an array so pay particular attention to line 35. Put simply - the sportInterests data element will be bound to the checkboxes. At the end we're displaying the selected values by using the join() method on the named data set (sportInterests), and of course we're wrapping all of that in the double moustache delimeters so that Vue.js will render it for us.

Sport Interests
Goalie
Forward
Winger


Your selected sport interests include: {{sportInterests.join(', ')}}

<!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>

Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/vue-js/vue-js-coldfusion-forms/