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

[M_N]

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?

[SanfordWhiteman]

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.

[M_N]

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

[SanfordWhiteman]

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)?

[M_N]

On the template.

[SanfordWhiteman]

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.

[M_N]

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>

[SanfordWhiteman]

At last, something to work with!

Use longhand syntax

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

not shorthand

@keydown.up.prevent="arrowUp"‍

[M_N]

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

[SanfordWhiteman]

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.)