VI. Vue.js and Coldfusion: Forms, if/else

If you're just getting started with this series of Vue.js posts, you should start with the Vue.js Starter Page.

In this Vue.js post I'll continue with forms but also introduce you to conditional rendering using the v-if/v-else/v-else-if directives. Yes, Vue.js will allow you to set up conditional code to view/display/execute other page elements based on conditional logic. It follows the basic conventions of other programming languages and is really easy to use.

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

In the last post we looked at a similar form as the one below, where we built an array for the sportInterests value to be dynamically displayed when the user checked the corresponding checkbox. We displayed the selected values by using the join() method on the named data set (sportInterests) and everything worked nicely. Now let's look at what happens to the user experience when we add some conditional rendering using v-if/v-else/v-elseif.