Vue.js 2.0：应用使用v-html呈现的vue组件，编译标记

Question

我正在使用VueJS 2.0

有没有办法让下面的渲染作为链接？

这是我的vue组件：

<template>
  <div v-html="markup"></div>
</template>

<script>
new Vue({
  data() {
    return {
      markup: '<router-link :to="{path: 'https://www.google.com'}"></router-link>',
    });
  },
});
</script>

在上面的示例中，我想动态导出一个标记，它包含一些动态内容，例如上面的router-link。

但该内容未编译，并导出<router-link>标记作为最终结果。

以编程方式编译的任何方法？

我真正想要的是找到一种手动编译html的方法。如果v-html不起作用，还有其他方法吗？

Answer 1

v-html仅适用于预编译的html，它基本上是生成的文本。 如果您想动态更改内容，只需使用if条件即可根据prop呈现列表视图，该视图将告诉您列表视图的类型。

我认为将标记保存在数据库中是个好主意。保存数据库中的某些设置并根据这些设置呈现必要的html更方便。 （你的案例中的道具类型）。也许如果你提供一个更具体的例子，将会有一些建议。正如您所看到的，答案基于您的router-link示例，我认为这不足以回答您的问题

Answer 2

鉴于您要呈现链接列表，一种方法可以是这样的：

<template>
  <router-link v-for="list in lists" :to="{path: list}"></router-link>
</template>

<script>
new Vue({
  data() {
    return {
      lists: ['https://www.google.com', 'https://www.stackoverflow.com']
    });
  },
});
</script>

编辑：

您可以在dynamic components的帮助下使用以下方法。

Vue.use(VueRouter)
new Vue({
  el: "#app",
  data: {
    dynamicComp: "router-link"
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.2.0/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app">
  somethind 
  <component :is="dynamicComp" :to="{path: 'https://www.google.com'}"></component>
</div>

Answer 3

我认为你不能通过v-html指令实例化Vue实例。您必须覆盖默认值才能这样做，这需要付出很多努力。

如果您只想要动态链接，为什么不试试这个：

data: {
  menu: []
}

然后：

<router-link v-for="item in menu" :to="item.src">{{item.name}}</router-link>

PS：你能举个例子说你必须做这些事吗？我对它的需求非常感兴趣。