Question

过了几天我试图在理论上做一些非常简单的事情。

首先，我使用Vue.js 2，vue-router＆amp; axios。我从数据库中获取数据（使用API）。

我是vue-router的fetching it before route enter，确保在创建页面组件时拥有我的数据。这是我的组成部分：

<template>
    <section v-html="content"></section>
</template>


<script>

export default {
    name: 'home',
    data() {
      return {
        content: undefined,
      }
    },
    beforeRouteEnter (to, from, next) {
      GetData( `${to.params.slug}`, (data) => {
        next(vm => {
          vm.processData(data);
        });
      } );
    },
    methods: {
      processData(data){
        this.content = marked(data.content);
      }
    },
}

</script>

GetData是一个自定义函数，它从我的API请求数据并返回格式化的JSON。

processData是一个组件方法，它解析一些JSON，以便我可以在我的模板中轻松使用它来格式化它。

我的一些数据是用户编写的降价内容。在processData中，我使用marked将其转换为HTML。

我们承认我的数据来自我的API：

datas: { 'content': '# Title⏎Some text⏎![Image title](/some/path/image.jpg)' }

在processData中，它将降价转换为HTML并将其影响到这样的组件数据：

this.content = marked(data.content);

所以this.content等于：

<h1>Title</h1><p>Some text</p><img title="Image title" src="/some/path/image.jpg" />

我现在只需要输入我的组件模板：

现在一切都很好！我的模板填写得很好。

但是，这是问题;我想为来自降价内容的每个图像添加一个自定义指令。像懒惰，或灯箱，或任何有用的指令，甚至vue原生的。

我尝试通过编辑每个图像的数据字符串来解析markdown时设置一个指令，但是v-html已经是一个指令，因此没有对此代码的评估。

知道如何获得这个吗？并且认为这只是一个例子，但我绝对想在任何用户异步内容上添加任何指令。也许我从一开始就做错了。我一无所知。

感谢。

Vue.js 2：使用自定义指令评估异步html内容（来自markdown）

0 个答案: