如何将elasticsearch json信息渲染为Vue.js的可点击链接

Question

Hey there folks :) I am trying to set up a search engine with elasticsearch/node.js, express and vue.js. I would like the search results to be clickable links, but they are only returning non-clickable html. I have tried adding normal html A- tags to the .json file, but on the front end this renders as a non clickable html text and not as a clickable link. Any suggestions would be really appreciated this is what I have tried, just as a test:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

I have had a look on google for possible solutions but all I could find were references to the normal html a-tag and that both j.son and vue.js can take those?

Answer 1

If I correctly get the issue, At FE your link get rendered as sting which is <a href="google.com">Google </a> . You need to use v-html in this case to tell element to render the passed value as html not as string

//Suppose you have this vue data prop
let url = <a href="google.com">Google </a>

Now In you html part Just use v-html to render

<div class="foo">
  <template v-html="url" />
</div>