Marketo and Vue.js

[Frank_Bültge]

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 

[SanfordWhiteman]

Change the Vue.js delimiter: https://vuejs.org/v2/api/#delimiters

Also please edit your post to use the syntax highlighter so it's readable, thanks.

[Frank_Bültge]

Thank you, @SanfordWhiteman, that was easy and of course I could have figured it out myself.

Unfortunately it doesn't seem to be the only issue. The v-for loop doesn't even run in Marketo landing pages.

Here is an example on codepen: https://codepen.io/aenk/pen/rNwVxVG 

And here is my Marketo landing page with the same code and scripts: https://go.efi.com/events-test

Do I have to consider something else?
Thank you for your help!

Frank

[Casey_Grimes]

In this particular case, you've set a MktoForms2 object check in your header JS, but your footer scripts do not. As a result, your JavaScript is halting.

[Frank_Bültge]

Thanks for your replay @Casey_Grimes , but that shouldn't be a problem. All other scripts always worked with this error message. I added a form and the error message disappeared. It still doesn't work, though.

https://go.efi.com/events-test

I also created a new landing page from a blank free form template without any other scripts (but Munchkin.js) and it doesn't work:

https://go.efi.com/vue-test 

There are no error messages in the console.

Thanks,
Frank

[SanfordWhiteman · Accepted solution]

Because you‘re trying to mount before the element exists in the DOM.

[Frank_Bültge]

Thank you, @SanfordWhiteman.