[Vuejs]-Vue – How do I make a list of buttons that each open a new window with a different URL?

by

1👍

✅

You should just be able to use the @click handler for the button in order to trigger window.open('https://yourwebsite.com/Update.aspx?id=' + event.eventID)..

Something like this should help get the idea across:

(since it doesn’t look like Stack Overflow allows window.open in a Snippet, you can check out this CodePen Mirror if you would like)

let app = new Vue({
  el: "#app",
  template: newAppTemplate(),
  data: {
    activeEvents: [{
        serviceType: "website1",
        loc: "loc1",
        dateLastUpdated: Date.now(),
        eventID: "google.com"
      },
      {
        serviceType: "website2",
        loc: "loc2",
        dateLastUpdated: Date.now(),
        eventID: "duckduckgo.com"
      },
      {
        serviceType: "website3",
        loc: "loc3",
        dateLastUpdated: Date.now(),
        eventID: "yahoo.com"
      },
    ]
  }
});

function newAppTemplate() {
  return `
    <table id="activeEvents">
        <tr v-for="event in activeEvents">
            <td>{{event.serviceType}}</td>
            <td>{{event.loc}}</td>
            <td>{{new Date(event.dateLastUpdated)}}</td> 
            <td>
                <button @click="window.open('https://' + event.eventID)">Open</button>
                <!-- want a button here that executes window.open() with URL "Update.aspx?id={{event.eventID}}" -->
            </td>
        </tr>
    </table>
`
}
table,
tr,
td {
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app"></div>
👤Matt Oestreich

Leave a comment