Question

这个问题解决方案很少但对我没什么用。我使用的是名为vue-filter的软件包，我想使用nl2br过滤器。当我尝试在我的html中使用它时

<p style="padding: 10px;font-size: 17px;"  v-html="$options.filters.nl2br(opDesc.description)"></p>

它给我以下错误

TypeError: _vm.$options.filters.nl2br is not a function

这是包github链接https://github.com/wy-ei/vue-filter#nl2br

Answer 1

您可以使用

v-html="$options.filters.FILTERNAME(args)"或
:inner-html.prop="args | FILTERNAME"。

见下面的演示。

＆＃13;

Vue.filter('upper', function (value) {
    return value.toUpperCase();
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

＆＃13;

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p v-html="$options.filters.upper(message)"></p>
  
  <p :inner-html.prop="message | upper"></p>
</div>

＆＃13;

Answer 2

没关系。过滤器在v-html指令中不起作用。仅限于胡须插值和v-bind指令。

改为使用计算属性：

<any-tag v-html="filtered" />

在组件中，使用以下内容：

computed: {
  filtered () {
    return this.nl2br(this.rawHtml)
  }
},
methods: {
  nl2br (source) {
    var filtered = //Filter logic here
    return filtered
  }
}

vue-filter不适用于v-html

2 个答案: