CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.jsvue-router
nobodyAskedYouPatrice
nobodyAskedYouPatrice

Reputation: 131

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

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": "[email protected]",
  "MsgTo": "[email protected],
  "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?

Upvotes: 0

Views: 892

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

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

Upvotes: 1

Related Questions