如何在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"

我希望能够单击列表中单个消息旁边的按钮，并让它加载特定 email 的MessagePath 。我 go 对此如何？

Answer 1

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