如何将 Vue.js 指令插入 WTForms 烧瓶表单？答案

【问题标题】：How to insert Vue.js directives into a WTForms flask form?如何将 Vue.js 指令插入 WTForms 烧瓶表单？
【发布时间】：2017-07-20 10:16:44
【问题描述】：

我正在尝试将这样的内容插入我的网站：https://vuejs.org/v2/examples/

在他们的示例中，html 看起来像：

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

我的烧瓶形式如下：

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

所以我需要更改行 Content: {{ form.content(cols="80", rows="50", id='larger')|safe }} 以表明它正在使用 :value="input" 和 @input="update" 。我怎样才能做到这一点？我是否在服务器上的表单定义中执行此操作？或者也许在页面加载后使用 jquery？

【问题讨论】：

标签： flask vue.js wtforms

【解决方案1】：

使用kwargs 指定不是有效标识符的键。

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

【讨论】：