javascript - Vue - 如何制作一个按钮列表，每个按钮都会打开一个具有不同 URL 的新窗口？

Question

Javascript:

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

    vOPTIONS = new Vue(vueOptions);
}

HTML:

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

我遇到了麻烦，因为您无法直接将 Vue 对象的属性插入 HTML 元素的属性，而且我无法从脚本引用 Vue 对象，因为它说它未定义。

如果您投反对票，请说明原因。

Answer 1

您应该能够使用按钮的 @click 处理程序来触发 window.open('https://yourwebsite.com/Update.aspx?id= ' + event.eventID)..

这样的事情应该有助于理解这个想法:

(因为 Stack Overflow 看起来不允许在代码片段中使用 window.open， 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>