Wie fügt man Vue.js-Anweisungen in ein WTForms-Formular ein?

Question

Ich versuche, so etwas wie dies in meine Website einfügen: https://vuejs.org/v2/examples/

In ihrem Beispiel sieht der html wie:

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

mein Kolben Form wie folgt aussieht: so

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

irgendwie Ich muss die Zeile Content: {{ form.content(cols="80", rows="50", id='larger')|safe }} ändern, um anzuzeigen, dass sie Folgendes verwendet: value = "input" und @ input = "update". Wie kann ich das machen? Tue ich es in der Formulardefinition auf dem Server? Oder vielleicht mit jquery, sobald die Seite geladen wurde?

Answer 1

Verwenden Sie kwargs, um Schlüssel anzugeben, die keine gültigen Bezeichner sind.

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