How to add a external link to a item within a list in vue?

Question

I have a list in vue that displays a bunch of filtered messages like this:

<v-card>
   <v-list-item-group
        v-model="model">
           <v-list-item
            v-for="msg in selectedMessages"
            :key="msg"
            :value="msg">
                <v-btn
                icon
                disabled
                <v-icon>mdi-star</v-icon>
                </v-btn>
                <v-list-item-content>
                   <v-list-item-title>
                   <strong>{{msg.Subject}} </strong>
                   </v-list-item-title>
                   <v-list-item-subtitle>
                   {{msg.MsgFrom}}
                   </v-list-item-subtitle>
                </v-list-item-content>
          </v-list-item>
   </v-list-item-group>
</v-card>

Here I am displaying each msg within a group of filtered messages ( selectedMessages ). I also added a button next to every msg within the list so that I can click on that button and the associated message's MessagePath will load on another page. MessagePath is just a url to a website that I want. Each message has a different MessagePath . With each message there is this kind of data:

  "mailbox": "example",
  "MsgFrom": "example@gmail.com",
  "MsgTo": "sample@outlook.com,
  "Subject": "subject_one"
  "MessagePath": "www.google.com"

I want to be able to click on the button next to the individual message that is in the list and have it load the MessagePath for that specific email. How would I go about this?

Answer 1

Try to add anchor tag instead button <a:href="msg.MessagePath" target="_blank">{{msg.MessagePath}}</a>