Skip to content

Instantly share code, notes, and snippets.

@Willshaw Willshaw/api.cfc
Last active Dec 20, 2017

What would you like to do?
auto reloading Vue/API table viewer
this file just needs to return an array of objects with key/value pairs
e.g. [{foo: 'bar', food: 'cheese'},{foo:'fighter',food:'jagermeister'}];
component {
remote function load() {
var qry = new core.utility.queryWrapper();
var str_select = '
FROM `database`.`table`
ORDER BY `timestamp` DESC
var skv_select = qry.execute( str_select, [], true );
return skv_select;
<!DOCTYPE html>
<title>Table viewer</title>
<link href="" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<div class="container" id="app">
<!-- simple status bar -->
<p class="alert alert-warning">{{status}}<p>
<!-- log table -->
<table class="table">
<!-- loop over keys of first item -->
<th v-for="(val,key) in log[0]">
<!-- loop over log entries -->
<tr v-for="entry in log">
<!-- output value -->
<td v-for="(val,key) in entry">
<!-- use axios ajax library -->
<script src=""></script>
<!-- load vue -->
<script src=""></script>
// mega simple vue app
var app = new Vue({
// hook to the dom
el: '#app',
// simple data for the template above
data: {
status: 'App loaded',
log: []
// this runs when the tool is created
created: function() {
// grab data initially
// set an interval to reload at set interval
// call the load data method again
// do it every 1000 milliseconds (each second)
methods: {
loadData: function() {
// set this = self to get around the this scope
// changing context in the ajax call return
var self = this;
// load the data from the api
// this could be php or anything that returns an
// array of key/value pairs in JSON format
.then(function (response) {
// update the log object
self.log =;
// set the status
self.status = 'loaded data';
// bugger all error handling, becuase this
// is just for dev use, if you see console errors
// then fix them
.catch(function (error) {
// if the ajax call fails, this should help
// set a failed status
self.status = 'ajax call failed';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.