Vue.js - how to output link from an object

Question

I want to output a hyperlink from an object. Is it possible to do so?

I currently have this in my store.js, would like to use this info to output

it in a modal on my website. I got it to display it, but the a href is outputting as text.

Checked this, but none of these solutions worked for me: Adding hyperlink in Javascript array of objects

export default {
  photos: [
    {
      name: "fox1",
      image: "fox01.jpg",
      id: 1,
      header: "Photoshoot with Fox Apparel",
      description:
        "Photoshoot with " +
        '<a href="https://fox.jp/" target="_blank">Fox</a>' +
        ", a sustainably - driven e - retailer from Canada."
    }
]
}

I think your best bet is to extract the link into a variable and then put that into an anchor tag in your template, vue reads your data as string it can't know it's html — Michael
– Michael, Commented May 6, 2020 at 5:21
Can't you just feed the property with the link into a <a> tag? — Mercurial Uroboros
– Mercurial Uroboros, Commented May 6, 2020 at 20:14
Thank you, tried v-html but that outputs everything within the object as text (such as [ { "name": "fox", "image": "fox01.jpg", "id": 1, "header": "Photoshoot with Fox Apparel"}]. — mikumikumiku
– mikumikumiku, Commented May 7, 2020 at 12:20

karlos · Accepted Answer · 2020-05-06 10:20:32Z

0

here is the solution: https://nexladder.com/vuejs-tutorial/vuejs-v-html-directive

<!DOCTYPE html>
    <html lang="en">
    <head>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
         <div id="app">
           <div v-html="content"></div>
         </div>
         <script>
         new Vue ({
              el: '#app',
        data: {
                content: '<h2>Hello World</h2>'
        }
                 })
       </script>
     </body>
    </html>

answered May 6, 2020 at 10:20

karlos

1,0023 gold badges14 silver badges44 bronze badges

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

1 Comment

Hiws Over a year ago

Be aware that this can open up your site to XSS vulnerabilities. Don't use this if the content is coming from untrusted users.

Collectives™ on Stack Overflow

Vue.js - how to output link from an object

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related