时间戳

首页 > 解决方案 > 在运行时生成的 Vue 组件中添加或注入 HTML 或组件

javascript - 在运行时生成的 Vue 组件中添加或注入 HTML 或组件

问题描述

我有一个 Vue 应用程序，我在其中获取一堆 markdown 文件并将它们制作成动态生成的组件，其中的链接由 Vue Router 处理。我正在使用这个Vue 降价加载器加载我的降价。

主路由文件如下所示：

import RamblePosts from "@/assets/rambles/rambles.json"; // Simple JSON that contains the name of the markdown documents

...RamblePosts.map(entry => ({
    path: `/${entry}`,
    name: entry,
    component: () => import(`@/assets/rambles/${entry}.md`)
}))
];

如您所见，我正在根据该目录中的降价文件生成组件。

示例用法是：

<template>
    <div class="wrapper-div rambling-wrapper">
        <div class="ramble-cards-wrapper">
            <RambleCard
                v-for="route in rambleList"
                :key="route.title"
                :title="route.title"
                :subtitle="route.subtitle"
                :ramble-url="route.url"
            />
        </div>
    </div>
</template>

<script>
    import RambleCard from "@/components/RambleCard";
    import rambleList from "@/assets/rambles/rambleList.json";

    export default {
        components: {
            RambleCard
        },
        data() {
            return {
                rambleList
            };
        }
    };
</script>

这是一个简单的卡片元素，仅显示 markdown 条目的名称、副标题和 vue-router 链接。单击链接将带您到相关文章，因此类似于url.com/foo

有没有办法让我以某种方式编辑或操作这些 Markdown 组件，并为它们添加一个 Vue 组件，甚至只是纯 HTML？由于它们是动态生成的，我不知道如何处理这种情况，因为我不能只是在这些文章组件中间的某个地方插入一个组件。

标签： javascriptvue.jsvuejs2markdown

解决方案

推荐阅读