Let’s first look at the “back”; Simple CFC with some remote methods. We use a set-up array to store our to-do items.
private function setup() if(!structKeyExists(session, "items")) session.items = ; if (cgi.content_type EQ "application/json") request.data = deserializeJSON(ToString(getHTTPRequestData().content));
Before each request, we check that there is an array in the scope of the meeting called “items”, and if not, we will create it.
private function respond() header name="Content-Type" value="application/json"; return structKeyExists(session, "items") && isArray(session.items) ? session.items : ;
We will also define the response type of the request to be JSON.
remote function get() return this.respond(); remote function add() this.setup(); session.items.push( "name": request.data.item, "created": DateTimeFormat(now()) ); return this.respond(); remote function remove() this.setup(); ArrayDeleteAt(session.items, url.position); return this.respond(); remote function clear() this.setup(); session.items = ; return this.respond();
The `get ()` function will simply return our array; `add ()` will push an item into the array, and `remove ()` will remove an item. `clear ()` will remove all items.
There’s a bit more code in index.cfm, so let’s go over some of the more notable changes.
Axios configuration has changed slightly. There is an instance of Axios that we set to set ‘api’, set a default of 5 seconds for each remote request, and used an interceptor to handle any error.
const api = axios.create( timeout: 5000 ); api.interceptors.response.use((response) => response, (error) => app.errors.push(error.message); );
There is now an array of errors in the Vue data object, which we will use to display any errors. The interceptor simply pushes all the errors into this array, which are then passed in a loop, alongside a simple undo button that resets the error array back to zero.
mounted: function() this.getItems(); ,
The `mounted` function is activated when the Vue component is first loaded on the page – so within that, we will call our` getItems () method to get the items from our remote `get` function in CFC.
addItem: function() api.post('remote.cfc?method=add', item: this.newItem ) .then(function(response) app.items = response.data; app.newItem = null; ) ,
Entering a new item uses one of the key concepts in Vue, that of `v-model`, the link changes to the input value automatically. The `addItem ()` method simply publishes the new item to our remote `add` function. Since all the remote functions return the array, we can simply update the local array with the response.
One of the nice things about Vue is how it can easily enable and disable (or hide) elements. When Vue checks the validity of a variable, it will assume that it is invalid if it is empty, not set to zero length. Then you can see that the Insert button can be easily turned off when the input is blank.
<button class="btn btn-primary" :disabled="!newItem" @click="addItem">Add Item</button>
removeItem: function(position) api.delete('remote.cfc?method=remove&position=' + position) .then(function(response) app.items = response.data; )
I hope this may have whetted your appetite a bit, and given you some tips on how you can start using VueJS in your existing CFML application.