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.