Vue.js 降价过滤器答案

【问题标题】：Vue.js markdown filterVue.js 降价过滤器
【发布时间】：2020-02-01 14:40:48
【问题描述】：

我正在使用 Evan You 的如何将 HTML 转换为 markdown 的示例 - https://jsfiddle.net/yyx990803/oe7axeab/。

通过npm 安装marked 包，然后执行它会导致错误'marked' is not defined。

如果我在我的index.html 文件中包含cdn 链接，那么markdown 会转换为“0”，我会收到错误：

[Vue warn]: Property or method "marked" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

编辑：

我尝试将其包含在我的main.js 中，如下所示：

import App from './App.vue';
import router from './router';
import store from './store';

import './css/main.css';
import i18n from './i18n';
import marked from 'marked';

const debugSetting = window.ApplicationConfig.DEBUG;
Vue.config.debug = debugSetting;

Vue.config.productionTip = false;

new Vue({
    router,
    store,
    i18n,
    marked,

    render: function(h) {
        return h(App);
    },
}).$mount('#app');

这感觉不对，因此我尝试使用 cdn 只是为了看看它是否至少有效。

组件

<template>
    <main-layout>
        <div class="wrapper" v-html="terms | marked"></div>
    </main-layout>
</template>

<script>
import MainLayout from '@/layouts/Main.vue';

import { getTerms } from '../api';

export default {
    name: 'Terms',
    components: {
        MainLayout,
    },
    data() {
        return {
            terms,
        };
    },
    filters: {
        marked: marked,
    },
    async mounted() {
        try {
            const response = await getTerms();

            if (response) {
                this.terms = response.data;
                console.log(this.terms);
            }
        } catch (err) {
            console.log(err);
        }
    },
};
</script>

【问题讨论】：

您能否分享您如何导入“标记”包的代码？
已编辑@hamzox
我也需要你的组件代码。你能在你的组件和 main.js 中记录标记的对象吗？
CDN 可以工作，因为它将设置一个标记的全局对象。
我已经添加了，但 cdn 正在将其转换为 0。不过我宁愿不使用 cdn。

标签： html vue.js markdown javascript-marked

【解决方案1】：

您缺少 marked 导入。将其全局注入main.js 将无济于事！

<template>
    <main-layout>
        <div class="wrapper" v-html="terms | marked"></div>
    </main-layout>
</template>

<script>
...
import marked from 'marked';
...
</script>

【讨论】：

如果这甚至不起作用，那么通过删除 CDN 内容并添加 loadash 来尝试这个示例。 jsfiddle.net/chrisvfritz/0dzvcf4d/…

【解决方案2】：

marked 如何在全球范围内使用的示例。

main.js

import Vue from 'vue'
import App from './App.vue'

import router from './router'
import store from '@/store'

import marked from 'marked'

// Lets use the code below inside a components
// Vue.marked()
// this.$marked()
Vue.use({
  install () {
    Vue.marked = marked
    Vue.prototype.$marked = marked
  }
})

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

someFile.vue

<template>
    <div v-html="$marked(someMarkdownText)"></div>
</template>

export default {
    name: 'Terms',
    components: {},
    data () {
        return {
            someMarkdownText: '# hello',
        }
    },
    mounted () {}
}

【讨论】：

【解决方案3】：

我使用了该示例的最新版本，这立即奏效了。

https://jsfiddle.net/yyx990803/v368d4g3/

    compiledMarkdown: function () {
      return marked(this.input, { sanitize: true })
    }
  },

【讨论】：

【解决方案4】：

原因是过滤器不打算在v-html 指令中使用。这样做时，marked 会查看组件的属性/方法，这实际上是没有声明的（因为它是一个过滤器）。

您的唯一方法是将marked 移动到data() 或methods{} 甚至更好，从中构建一个计算属性（因此它被缓存）。

可能如果模板引擎中有{{{ }}}，但由于没有，所以您想要实现的目标是不可能的。

PS：您提到的示例之所以有效，是因为它使用的是 Vue v1.0 ；只有更新依赖项才会使小提琴失败。

【讨论】：