Фильтр уценки Vue.js

Question

Я использую пример Evan You о том, как преобразовать HTML в уценку - https://jsfiddle.net/yyx990803/oe7axeab/.

Установка пакета marked через npm с последующей реализацией приводит к ошибке 'marked' is not defined.

Если я включу ссылку cdn в мой файл index.html, тогда уценка преобразуется в «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>

Answer 1

Вам не хватает импорта marked. Глобальное введение его в main.js не поможет!

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

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

Answer 2

Причина в том, что фильтры не предназначены для использования в директиве v-html. При этом marked проверяется на свойствах / методах компонента, который на самом деле не объявлен (поскольку это фильтр).

Единственный способ для вас - переместить marked в data() или methods{} или, что еще лучше, создайте из него вычисляемое свойство (чтобы оно кэшировалось).

Это могло бы быть возможно , если в шаблоне было {{{ }}}двигатель, но поскольку его нет, то, чего вы хотите достичь, невозможно.

---

PS: упомянутый вами пример работает, потому что он использует Vue v1.0 ;только обновление зависимостей может привести к сбою этой скрипки.

Answer 3

Я использовал последнюю версию примера, и это сразу сработало.

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

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