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