VueJS2 v-html 带过滤器 [英] VueJS2 v-html with filter

问题描述

如何使用过滤器显示原始 html?

我有这样的事情:

K.json = function( json ) {if( typeof json!='string' ) json = JSON.stringify( json, null, 2 );json = json.replace(/</g, '<' ).replace(/>/g, '>' );//替换(/&/g, '&amp;')var pattern =/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g;var html = json.replace(模式，函数(匹配){var cls = '数字';var 后缀 = '';if(/^"/.test( 匹配) ) {if(/:$/.test( 匹配 ) ) {cls = 'key';match = match.slice( 0, -1 );后缀 = ':'} 别的 {cls = '字符串';}} else if(/true|false/.test( match ) ) {cls = '布尔';} else if(/null/.test( match ) ) {cls = '空';}返回 '​​'+ 匹配 + '</span>'+ 后缀；});返回html；};Vue.filter('json', K.json);

然后像这样使用它们:

它显示一个警告并且显示不正确:

vue.js:523 [Vue 警告]:属性或方法json"未在实例上定义，但在渲染期间被引用.确保在数据选项中声明反应数据属性.

(在根实例中找到)

我也尝试了论坛的解决方案:https://laracasts.com/discuss/channels/vue/use-a-filter-custom-filter-in-v-html-property?page=1

<p v-html="this.$options.filters.json(description)"></p>

显示错误:

[Vue warn]:渲染根实例时出错:vue.js:3063 未捕获的类型错误:无法读取未定义的属性过滤器"at eval (eval at makeFunction (vue.js:8260), <anonymous>:2:2975)在 Proxy.renderList (vue.js:3158)在 Proxy.eval (在 makeFunction (vue.js:8260), :2:2169)在 Vue$3.Vue._render (vue.js:3054)在 Vue 3 美元.<匿名>(vue.js:2430)在 Watcher.get (vue.js:1661)在新的 Watcher (vue.js:1653)在 Vue$3.Vue._mount (vue.js:2429)在 Vue$3.$mount (vue.js:6000)在 Vue$3.$mount (vue.js:8327)

在 VueJS2 上执行此操作的正确方法是什么?

解决方案

为了完整起见，您有一些选择，例如:

• v-html="$options.filters.FILTERNAME(args)" 或
• :inner-html.prop="args | FILTERNAME" 或
• v-html="METHODNAME(args)"，如果你创建了一个方法.

见下面的演示.

function json(text) {//发挥你的魔法返回 text.toUpperCase();//仅用于演示}Vue.filter('json', function (value) {返回json(值)；})新的 Vue({el: '#app',数据: {消息:你好 Vue.js！"},方法: {jsonMethod(v) {返回 json(v);//为外部函数创建一个代理"}}})

<script src="https://unpkg.com/vue"></script><div id="应用程序"><p v-html="$options.filters.json(message)"></p><p :inner-html.prop="message | json"></p><p v-html="jsonMethod(message)"></p>

How to display raw html with filter?

I have something like this:

K.json = function( json ) {
    if( typeof json!='string' ) json = JSON.stringify( json, null, 2 );
    json = json.replace( /</g, '&lt;' ).replace( />/g, '&gt;' ); // replace(/&/g, '&amp;')
    var pattern = /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g;
    var html = json.replace( pattern, function( match ) {
        var cls = 'number';
        var suffix = '';
        if( /^"/.test( match ) ) {
            if( /:$/.test( match ) ) {
                cls = 'key';
                match = match.slice( 0, -1 );
                suffix = ':'
            } else {
                cls = 'string';
            }
        } else if( /true|false/.test( match ) ) {
            cls = 'boolean';
        } else if( /null/.test( match ) ) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>' + suffix;
    } );
    return html;
};
Vue.filter( 'json', K.json );

And use them something like this:

<div v-html="thecolumn | json"></div>

It shows a warning and displayed incorrectly:

vue.js:523 [Vue warn]: Property or method "json" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 

(found in root instance)

I also tried solution from forum: https://laracasts.com/discuss/channels/vue/use-a-filter-custom-filter-in-v-html-property?page=1

<p v-html="this.$options.filters.json(description)"></p>

It shows error:

[Vue warn]: Error when rendering root instance: 
vue.js:3063 Uncaught TypeError: Cannot read property 'filters' of undefined
    at eval (eval at makeFunction (vue.js:8260), <anonymous>:2:2975)
    at Proxy.renderList (vue.js:3158)
    at Proxy.eval (eval at makeFunction (vue.js:8260), <anonymous>:2:2169)
    at Vue$3.Vue._render (vue.js:3054)
    at Vue$3.<anonymous> (vue.js:2430)
    at Watcher.get (vue.js:1661)
    at new Watcher (vue.js:1653)
    at Vue$3.Vue._mount (vue.js:2429)
    at Vue$3.$mount (vue.js:6000)
    at Vue$3.$mount (vue.js:8327)

What's the correct way to do this on VueJS2?

解决方案

For completeness, you have some options, like:

• v-html="$options.filters.FILTERNAME(args)" or
• :inner-html.prop="args | FILTERNAME" or
• v-html="METHODNAME(args)", if you create a method.

See demo below.

function json(text) {
  // do your magic
  return text.toUpperCase(); // just for demo
}

Vue.filter('json', function (value) {
    return json(value);
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    jsonMethod(v) {
      return json(v); // create a "proxy" to the outer function
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p v-html="$options.filters.json(message)"></p>
  
  <p :inner-html.prop="message | json"></p>
  
  <p v-html="jsonMethod(message)"></p>
</div>

这篇关于VueJS2 v-html 带过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！