Solved
Marketo and Vue.js
Hi,
I wonder if it possible to use vue.js with Marketo landing pages. I have an HTML code which should render vue variables, but it doesn't work and I guess it's because of the syntax, because the vue.js variables have the same syntax as Marketo tokens. Here is my code (it works everywhere, but not with Marketo landing pages):
<div>
<div id="app">
<div v-for="show in shows" id="element-item">
<div class="category">{{ show.Filter_category }}</div>
<img :src="show.Pic_Link" />
<div class="name">{{ show.Title }}</div>
<div class="boldsubhed">{{ show.Location }}</div>
<div class="boldsubhed">{{ show.City }}</div>
<div class="description">{{ show.Date }}</div>
<div class="readmore"><a :href="show.Website" target="_blank">Website</a></div>
</div>
</div>
</div>
and the Javascript, but I don't think that there are any issues with the script or linked js frameworks (I use papaparse.js to convert csv data to JSON):
<script>
const moviesUrl =
"https://docs.google.com/spreadsheets/d/e/2PACX-1vTtKbv_S8Fdo3HLhm64Tc94WZ6FuqtzqePIjuejNFJxKkUvAE8JF8V2KgKoz1n5jQUDfL8A3F-QoDWk/pub?gid=0&single=true&output=csv";
const showsUrl =
"https://docs.google.com/spreadsheets/d/e/2PACX-1vRwXKhn6tDPp0mZ0Zk214ovsDdfFWHIFWIGUgZatJ59hMBGb2pLzr9_DnIOZKVV_jOU5Kker0nhCmW_/pub?&single=true&output=csv";
const app = new Vue({
el: "#app",
data: function () {
return {
movies: [],
shows: []
};
},
created: function () {
this.fetchMovies();
this.fetchShows();
},
methods: {
fetchMovies() {
Papa.parse(moviesUrl, {
download: true,
header: true,
complete: (results) => this.movies = results.data
});
},
fetchShows() {
const _this = this;
Papa.parse(showsUrl, {
download: true,
header: true,
complete: function(results) { _this.shows = results.data; }
});
}
}
});
</script>
Are there any solutions or workarounds? I really want or need to use vue.js for a couple of projects.
Thanks,
Frank