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."
}
]
}
1 answers
solution1
0 2020-05-06 10:20:32
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>
solution2
-1 2022-08-29 16:59:08
I have the same problem, I would like to insert link in the description.
const features = [
{
name: 'Name',
description: 'text'+<a href="../assets/doc.pdf" target="_blank">link</a>+'text',
icon: Icon,
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.