1

I'm using VueJS 2.0

Is there any way to make the below render as a link?

Here is my vue component:

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

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

In the above example, I want to dynamically export a piece of markup, it contains some dynamic contents, such as router-link like above.

But that content did not compile, and exports a <router-link> tag as a final result.

Any way to make it compile programmatically?

What I really want is to find a way to compile a piece of html manually. If v-html doesn`t work, Is there any other way?

Improve this question
4
  • Possible duplicate of v-html not rendering vue component in Vue 2 Commented Feb 8, 2017 at 6:35
  • @Saurabh Thank you, but I don't want why it cannot, instead I want to get a solution, any ideas?. Commented Feb 8, 2017 at 6:39
  • Why do you want to do it, what is your exact problem you are trying to solve? Commented Feb 8, 2017 at 6:43
  • @Saurabh Yes, I just want to dynamically render a list of link, in a more flexable condition. Maybe I want something like this github.com/vuejs/Discussion/issues/77, in Vue2.0 Commented Feb 8, 2017 at 6:46

3 Answers 3

Reset to default
1

v-html works only for pre-compiled html which is basically generated text. If you want do dynamically change content, simply use if conditions to render your list view based on prop that will tell you the type of the list view.

I don't think it's a good idea to save the markup in your db. It's rather more convenient to save some settings in your db and based on those to render the necessary html. (the prop type in your case). Maybe if you provide a more concrete example, some suggestions will follow. As you can see, the answers were based on your router-link example which I think is not enough to answer your question

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

I don't think you can instantiate Vue instances via v-html directive. You must override the default to do that, which would take lots of efforts.

If you just want dynamic links, why not try this:

data: {
  menu: []
}

and then :

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

PS: Can you give an example that you must do such things? I am really interesting in what needs it would be.

Improve this answer

3 Comments

The simplest way to explain is that I want to change the template dynamically, store the markup fragment in my database
大兄弟你咋不直接存数据，然后直接取出来解析成 JavaScript 对象，当Vue的data使用。
如果你要硬是存成模板的话，那就从数据库导出给服务器后端生成动态的JavaScript文件吧。
0

Given that you want to render a list of links, one way to do this can be like this:

<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>

Edit:

You can use an approach like following as well using with the help of 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>

Improve this answer

4 Comments

Thank you, I know ths, but I want to render a fully dynamic content with any component tag referred.
@AlfredHuang Can you tell how is your list, can you elaborate more on your list, code and usecase to help understand better, Why I am asking is there can be some other way to do the same thing in vue way.
I'm developing an admin framework, and working on a ListView component, and I may define some field with field type as a prop pass to it. And I want to support a field type called html to render some dynamic markup, such as router-link or switch or image-picker or date-picker, which were declared as Custom Components.
Master, see this from docs: vuejs.org/v2/guide/render-function.html#Template-Compilation, What I want is called template compilation here. It seemed I can inject dynamic template using this way. But I don't quite understand how to use it in my case.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.