Question

我有一个用于编辑博文的烧瓶页面。它有以下vue：

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

            <div id="editor">
            Content: {{ form.content( **{':value':'input','@input': 'update'}) }}
                <div v-html="compiledMarkdown"></div>
            </div>
            <br/>
            Category: {{ form.category|safe }}
            <br/>
            <input type="submit" value="Save">
        </form>
<script>
new Vue({
  el: '#editor',
  data: {
    input: "starting data"
  },
  computed: {
    compiledMarkdown: function () {
      return marked(this.input, { sanitize: true })
    }
  },
  methods: {
    update: _.debounce(function (e) {
      this.input = e.target.value
    }, 300)
  }
});
</script>

我想要做的是根据烧瓶发送的内容输入一个起始值。基本上我会改变输入：＆＃34;启动数据＆＃34;输入：{{form.content.data}}。但是，当我这样做时，它会在我更改框中的文本时停止更新输入。我认为我有点硬编码数据是form.content.data而不是字符串。

如何传递此信息以使其以form.content.data值开头但仍可更改？

Answer 1

它不起作用的原因是因为{{ form.content.data }}在模板中显示为原始文本。

因此它试图使用类似的东西：棕色的狐狸跳过懒狗

并且这不会编译为javascript对象。在{{ form.content.data }}周围添加引号，例如'{{ form.content.data }}'修复它。

如何将vue数据设置为表单的值？

1 个答案: