How can I create a menu of buttons in Vue that open individual windows with unique URLs when clicked?

Question

How can I create a menu of buttons in Vue that open individual windows with unique URLs when clicked?

Javascript Code:

function InitializeVue() {
    var vueOptions = {
        el: '#activeEvents',
        data: {
            activeEvents: []
        }
    };

    vueInstance = new Vue(vueOptions);
}

HTML Code:

<table id="activeEvents">
    <tr v-for="event in activeEvents">
        <td>{{event.serviceType}}</td>
        <td>{{event.loc}}</td>
        <td>{{event.dateLastUpdated}}</td> 
        <td>
            <!-- Include a button here that triggers window.open() with the URL "Update.aspx?id={{event.eventID}}" -->                              
        </td>
    </tr>
</table>

I have faced difficulties as it's not possible to directly inject attributes from a Vue object into an HTML element, and I encountered issues referencing the Vue object from within a script due to it being undefined.

If you are considering downvoting, please provide feedback on why. Thank you!

javascript asp.net vue.js

Answer 1

Answer №1

To trigger the

window.open('https://yourwebsite.com/Update.aspx?id=' + event.eventID)

function, you can simply use the @click handler for the button.

Here is an example to help illustrate the concept:

(Since Stack Overflow does not allow window.open in a Snippet, you can view this CodePen Mirror here)

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>

Answer 2

To trigger the

window.open('https://yourwebsite.com/Update.aspx?id=' + event.eventID)

function, you can simply use the @click handler for the button.

Here is an example to help illustrate the concept:

(Since Stack Overflow does not allow window.open in a Snippet, you can view this CodePen Mirror here)

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>

How can I create a menu of buttons in Vue that open individual windows with unique URLs when clicked?

Answer №1

Similar questions

Error on GoDaddy server caused by a trust level set to 'Full'

The harmonious combination of Opera and XMLHttpRequest creates a

Unable to trigger Vuejs click event when using v-if condition

"Exploring the power of Vue3's composition API in managing the

What is the best way to align a box once another one has been placed?

No entries found in the Nuxt/content module's array

Displaying selected checkbox values in a URL with parameters using PHP and JavaScript

Utilizing Vue to properly reference asset paths for background URLs

Detect when the Keyboard is hidden in React Native

JSP checkbox functionality

"Everything is running smoothly on one REST endpoint, but the other one is throwing a CORS error

The issue arises when HTML tables with unique IDs are all displaying the same value from an AJAX callback

Create a log table specifically for tracking changes made to the drop-down menu

Show the "Splash" picture, then switch to a newly uploaded image and show it for a set amount of time

How can I stop jQuery from repeatedly appending content every time I click the button?

Integrating Vue Router with a CFML (Lucee) server

Elegant switch in jQuery

What is the best way to design a grid with various squares in React Native?

Creating a dynamic onclick function that depends on a variable passed from a while loop in PHP

Creating an array upon clicking and dynamically changing its class using AngularJS