Skip to content

Instantly share code, notes, and snippets.

@elpete

elpete/ColdBox.cfc

Last active April 28, 2017 15:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elpete/66ac7485c8efd8f2fac9bad2a0dd21e8 to your computer and use it in GitHub Desktop.
Save elpete/66ac7485c8efd8f2fac9bad2a0dd21e8 to your computer and use it in GitHub Desktop.
Download ZIP
A simple function to correctly escape values for Vue props in CFML (example integration with ColdBox)
Raw
app.js
// resources/assets/js/app.js
import Vue from "vue";
Vue.component( "echo", {
props: [ "text" ],
template: `<div v-text="text"></div>`
} );
const app = new Vue( {
el: "#app"
} );
Raw
ColdBox.cfc
// config/ColdBox.cfc
component {
function configure() {
coldbox.viewsHelper = "includes/helpers/ViewHelper.cfm"
}
}
Raw
index.cfm
<!-- views/main/index.cfm -->
<cfoutput>
<echo :text="#prop( { "id" = 1, 'name' = "Eric", "friends" = [] } )#"></echo>
</cfoutput>
Raw
Main.cfm
<!-- layouts/Main.cfm -->
<cfoutput>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Props and CFML</title>
</head>
<body data-spy="scroll">
<div id="app" class="container">#renderView()#</div>
<script src="includes/js/app.js"></script>
</body>
</html>
</cfoutput>
Raw
ViewHelper.cfm
<!-- includes/helpers/ViewHelper.cfm -->
<cfscript>
function prop( required any value ) {
if ( isSimpleValue( value ) ) {
return value;
}
return htmlEditFormat( serializeJson( arguments.value ) );
}
</cfscript>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment