[VuePress]: Extract links from data

Question

In VuePress, I am modifying the default home page. Given the data that I obtain from the markdown page, how can I do to interpret the links provided in that data?

I get the data in the following way:

./README.md
---
news: [{title: A title, content: my content}]
---

Then I use the data as follows:

    ./components/Home.vue

...
<ul>
  <li v-for="(item, index) in data.news :key="index">
    <b>{{ item.title }}</b>
    {{ item.content }}
  </li>
</ul>

    ...
<script>
    export default {
      computed: {
        data() {
          return this.$page.frontmatter;
        },
    }
</script>

When this is displayed, the content in news.content does not interpret the links neither in HTML, nor in Markdown. How can I do to be able to include links in that news.content?

PS: The work with news.content is actually more complex visually, this is why I need some way to pass content to my Home.vue which can interpret links.

Answer 1

The v-html directive allows rendering html from the content data.