如何在 vue 的列表中添加指向项目的外部链接？

Question

我在 vue 中有一个列表，显示一堆过滤后的消息，如下所示：

<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>

在这里，我在一组过滤的消息 (selectedMessages) 中显示每个消息。我还在列表中的每个消息旁边添加了一个按钮，以便我可以单击该按钮，并且相关消息的“MessagePath”将加载到另一个页面上。 MessagePath 只是我想要的网站的网址。每条消息都有不同的 MessagePath。每条消息都有这样的数据：

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

我希望能够单击列表中单个消息旁边的按钮并让它加载该特定电子邮件的 MessagePath。我该怎么办？

Answer 1

尝试添加锚标签而不是按钮<a :href="msg.MessagePath" target="_blank">{{msg.MessagePath}}</a>