Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<div id="vueApp">
<div>
<h1>{{this.title}}</h1>
{{this.content}}
<p>Static test form the developer</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#vueApp',
delimiters: ["{%","%}"],
data: {
message: '{{this.title}}',
content: 'Hello world content',
cookieExists: false
},
methods: {
test: function(){
alert('here')
},
getFreshContent: function () {
fetch('/-/instant/7-0034c0-jp3fqm.json')
.then(response => response.json())
.then(data => {
let content = data.data[0].content
this.message = 'dynamiced loaded data from json: ' + content.title
});
}
},
created: function() {
// this boolean check could be used against a cookie
if(this.cookieExists){
this.getFreshContent()
}
},
template: `
<div>
<h1>{%message%}</h1>
{%content%}
<button @click="test()">try me</button>
<div v-if="cookieExists">Personalize!</div>
</div>
`
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment