Delimiters dont seem to work after escaping

support
1

I have a problem that I’m going to represent with a sample snippet:

The index file on Hugo:

<div id="app">
    <div>
        I have this {{"{{ item }}"}} having {{"{{ thisPercent }}%"}} Power
        <input v-model="thisPercent" type="range" name="points" min="0" max="100" style="width:100%">
      </div>
</div>
<script src="vue-app.js"></script>

In the JS file: vue-app.js

var app = new Vue({
    el: '#app',
    data: {
      item: 'Hammer',
      thisPercent: 40
    }
})

I am using {{"{{..}}"}} to represent {{..}} in Hugo. That is, to bypass the same delims that vue uses to avoid an error in Hugo. I got that idea from some post here. But it seems, the bypassed vue element is not as dynamic. It acted pretty much static. For instance, when I run this in Hugo, the sliders that are supposed to change the percentage of thisPercent do not work at all.

This is frustrating me to no end because all the code that I wrote elsewhere cannot be ported like this. Am I missing a fundamental thing? Is this not possible?

2

You question is indeed fundamental. Please have a look at the Requesting Help guidelines.

You need to go through the Docs. Particularly the safeJS function.

I am closing this topic since there are dozens of similar topics.

If you cannot solve this then you really need to share the project in question.