How do you prevent Marketo from rewriting Vue.js fields?

Highlighted
Level 1

How do you prevent Marketo from rewriting Vue.js fields?

I'm trying to use Vue.js to create interactive elements on a landing page, but Marketo is rewriting my input fields and their wrapper divs. How do I prevent Marketo from doing that?

9 REPLIES 9
Highlighted
Level 10 - Community Moderator

Re: How do you prevent Marketo from rewriting Vue.js fields?

Rewriting to what?

You're not being specific enough. Are you trying to create your own custom form on a Marketo LP? That partially defeats the purpose of using Marketo LPs in the first place.

Highlighted
Level 1

Re: How do you prevent Marketo from rewriting Vue.js fields?

It's a custom form, but the fields are meant for interaction, not submission.

Highlighted
Level 10 - Community Moderator

Re: How do you prevent Marketo from rewriting Vue.js fields?

Still not enough info. Where are you adding this markup?  In the RIch Text editor (not a good idea)?  Or on the template (good idea)?  Or in a mktoText variable (acceptable idea)?

Highlighted
Level 1

Re: How do you prevent Marketo from rewriting Vue.js fields?

On the template.

Highlighted
Level 10 - Community Moderator

Re: How do you prevent Marketo from rewriting Vue.js fields?

Then I don't understand what kind of "rewriting" you're referring to.

You can't get real help on the Community while being this stingy with details.  If you aren't allowed to post code and link to actual pages for security reasons, this probably is not the right venue.

Highlighted
Level 1

Re: How do you prevent Marketo from rewriting Vue.js fields?

I have a vuejs component with the following template:

<template id="nsTemplate">
   <div class="nsWrapper">
      <input class="nsInput" type="number" :style="nsPad" ref="input" :min="minAtt" :step="step" :max="maxAtt" :value="value" @keydown.up.prevent="arrowUp" @keydown.down.prevent="arrowDown" @blur="formatValue" @input="updateValue($event.target.value)"/>
      <div class="appended" ref="nsAppend"></div>
      <div class="arrows">
         <div class="arrow-up" @click="arrowUp"><i class="fa fa-angle-up"></i></div>
         <div class="arrow-down" @click="arrowDown"><i class="fa fa-angle-down"></i></div>
      </div>
   </div>
</template>

The resulting code should look like this:

<div class="nsWrapper" id="staff" name="staff">
   <input type="number" min="0" step="1" max="1000" class="nsInput" style="padding-right: 35px;">
   <div class="appended"></div>
      <div class="arrows">
      <div class="arrow-up"><i class="fa fa-angle-up"></i></div>
      <div class="arrow-down"><i class="fa fa-angle-down"></i></div>
   </div>
</div>

But the Marketo page renders this instead:

<number id="staff" name="staff" min="0" max="1000" step="1" fixed="0"></number>
Highlighted
Level 10 - Community Moderator

Re: How do you prevent Marketo from rewriting Vue.js fields?

At last, something to work with!

Use longhand syntax

v-on:keydown.up.prevent="arrowUp"

not shorthand

@keydown.up.prevent="arrowUp"
Highlighted
Level 1

Re: How do you prevent Marketo from rewriting Vue.js fields?

It seems the dash in the component name is what Marketo didn't like. I also changed the code to longhand.

Highlighted
Level 10 - Community Moderator

Re: How do you prevent Marketo from rewriting Vue.js fields?

The @ is stripped as are other rare-but-allowed characters. Longhand is necessary.

("Allowed" meaning allowed by the HTML5 spec, but mistakenly disallowed by Marketo.)