[FIXED] How to insert Vue.js directives into a WTForms flask form?

Issue

I am trying to insert something like this into my website: https://v2.vuejs.org/v2/examples/

In their example, the html looks like:

<div id="editor">
  <textarea :value="input" @input="update"></textarea>
  <div v-html="compiledMarkdown"></div>
</div>

my flask form looks like:

<form method="POST" action="{{ url_for('edit',itemid=item.id) }}" id="text-input">
    {{ form.csrf_token }}
    <div style="margin-left:30px;margin-top:20px;">
        Title: {{ form.title }}
    </div>
    <br/>
    Content: {{ form.content(cols="80", rows="50", id='larger')|safe }}
    <br/>
    Category: {{ form.category|safe }}
    <br/>
    <input type="submit" value="Save">
</form>

so somehow I need to change the line Content: {{ form.content(cols="80", rows="50", id='larger')|safe }} to indicate that it is using :value="input" and @input="update" . How can I do this? Do I do it in the Form definition on the server? Or perhaps with jquery once the page has been loaded?

Solution

Use kwargs to specify keys that are not valid identifiers.

form.content(cols="80", rows="50", id='larger', **{':value':'input','@input': 'update'})

Answered By - Ikbel