How to add hyperlink to objects property value?

Viewed 54

Please suggest a way for me to add hyperlink to the value of objects property in vue.js. I.e. I want the word London in the desc property to have a hyperlink. Coudn't able to find a solution since I am new to vue.

My template:

 <template>
     <b-col md="3" v-for="(user, i) in learders" :key="i">
     <div class="content">
          <div class="title">
            <h3>{{ user.name }}</h3>
            <h5>{{ user.designation }}</h5>
          </div>
          <div class="seperator"></div>
          <p>{{ user.desc }}</p>
        </div>
        </b-col>
 </template>

Vue Script:

export default {
data() {
   return {
   learders: [
    {
      name: 'Abrahm',
      designation: 'Co-Founder & CEO',
      image: 'abb.jpg',
      desc: 'Abrahmgraduated from London.'
       }
    ]
  }
}
1 Answers

in simple way you can use v-html:

<p v-html="user.desc"></p>

learders: [
    {
      name: 'Abrahm',
      designation: 'Co-Founder & CEO',
      image: 'abb.jpg',
      desc: 'Abrahmgraduated from <a href="/">London.</a>'
    }
]
Related