时间戳

首页 > 解决方案 > 如何在 vue 列表中添加指向项目的外部链接？

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

问题描述

我在 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。我该怎么办？

标签： javascriptvue.jsredirectvuetify.jsvue-router

解决方案

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

推荐阅读