如何将烧瓶模板与Vuejs的"Mustache"语法一起使用? [英] How do I use flask templating with Vuejs's “Mustache” syntax?

问题描述

似乎有些重叠.

例如，此代码:

  <div id="entry">
    <textarea rows="20" v-model="input"></textarea>
    <div>
      {{ input | md }}
    </div>
  </div>
  <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script> 
 <script>
var vm = new Vue({
  el: '#entry',
  data: {
    input: ''
  },
  filters: {
    md: function(val){
      return marked(val)
    }
  }
})
</script>

似乎可以在这里正常工作: https://jsfiddle.net/5qvc815w/(除了在markdown中呈现的html标签)

seems to work alright here: https://jsfiddle.net/5qvc815w/ (aside from the html tags rendered in the markdown)

但是在烧瓶中，我得到了

but in flask I am getting

jinja2.exceptions.TemplateAssertionError
TemplateAssertionError: no filter named 'md'

它似乎正在寻找jinja2来发现花括号中的内容，而不是它应该在vue.js中发现的内容.

it seems to be looking to jinja2 to discover whats in the curly braces instead of in vue.js which it should be doing.

推荐答案

当Vue的默认插值定界符与另一个框架发生冲突时，您可以自定义它们.

When Vue's default delimiters for interpolation clash with another framework, you can customize them.

var vm = new Vue({
  delimiters:['${', '}'],
  el: '#entry',
  data: {
    input: ''
  },
  filters: {
    md: function(val){
      return marked(val)
    }
  }
})

使用方式如下:

<div>
  ${ input | md }
</div>

这篇关于如何将烧瓶模板与Vuejs的"Mustache"语法一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！