vue.js - Vue中设置marked的属性

问题描述

问 题

效果是这样的

我在methods里面写了个markdown函数、然后在mounted的时候调用了一下、
但是！什么东西都没有生效

我还是贴个代码吧

<template>
    <div id="editor">
    <textarea v-model="input"></textarea>
    <div v-html="compiledMarkdown"></div>
    </div>
</template>

<script>
import marked from 'marked'


export default {
    data() {
        return {
            input: ''
        }
    },
    mounted() {
        this.markdown()
    },
    computed: {
        compiledMarkdown: function () {
            console.log(marked(this.input, { sanitize: true }))
            return marked(this.input, { sanitize: true })
        }
    },
    methods: {
        markdown() {
            marked.setOptions({
                renderer: new marked.Renderer(),
                gfm: true,
                tables: true,
                breaks: false,
                pedantic: false,
                sanitize: false,
                smartLists: true,
                smartypants: false
            });
        }
    }
}
</script>

上面就是本页面的所有代码

解决方案

markdown函数先设置了marked的参数，包括sanitize: false，后面computed属性又重新设置了sanitize: true，将前面的sanitize设置的false覆盖为true

这篇关于vue.js - Vue中设置marked的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！