如何将外部 link 添加到 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 只是我想要的网站的 url。每条消息都有不同的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>

如何将外部 link 添加到 vue 列表中的项目？

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

javascript

vue.js

vue-router

vuejs2

vuetify.js