Is there a way to create hyperlink within Vue argument

user_12226294 0
Viewed 138

I have a function that creates a text box that alters within each name. The thing is, I want one of these description arguments to allow a hyperlink within the text. example:

var maps = new Vue({
   el: "#maps",
   data: {
      selected: 'US County'
      maps = [
       { 
           name: 'US County'
           description: "This is where I want my **hyperlink** to go"
       }
      ]
   }
 })

I want the hyperlink to be within this description argument among separate text..I tried using <a href... but it wasn't working.

I am relatively new to HTML and Vue JS so I apologize if this question does not entirely make sense.

vue.js html
1 Answers

If using Vue 2, check out this page, which shows how to bind a variable and display it as HTML. You will also want to be sure to store your description + HTML as a template literal

Template should be something similar to:

<template>
  <div v-html="maps[0].description"></div>
</template>

Notice the backticks in the description. This is called a template literal. Your script should be similar to the following:

   var maps = new Vue({
   el: "#maps",
   data: {
      selected: 'US County'
      maps = [
       { 
           name: 'US County'
           description: `This is where I want my <a href="blahblah">link</a> to go`
       }
      ]
   }
 })
user_27149040
Related