Javascript 将@click事件绑定到数组中的href

我使用以下代码填充数据表。 对于数据表中的每一行，我都有一个

update

链接。单击

update

应调用

showmodel（）

方法

如何从此

调用

showmodel（）

方法：{
ShowModal（buildingId）{
//在这里做点什么。。。
}, 
listBuildings（）{
axios
.get（“https://localhost:44349/api/Building/List“，标题）
。然后（响应=>{
response.data.forEach（el=>{
这个是.dataset.push([
el.buildingId，
el.projectName，
el.city，
`更新`//我正在尝试这个。。。
]);
$（“#建筑物”）。数据表({
数据：this.dataset}）；
});
}

我认为您尝试的不是Vue方式，而是JQuery方式。因此，让我向您推荐更正确的代码（IMHO）

{{item.buildingId}
{{item.projectName}
{{item.city}
点击我！这里不需要。如果你不想点击单元格，你可以使用div并用css设置样式
方法：{
showModal（buildingId）{
//在这里做点什么。。。
}, 
listBuildings（）{
axios
.get（“https://localhost:44349/api/Building/List“，标题）
。然后（响应=>{
//我想你这里有一个对象数组？
this.dataset=response.data
})
.catch（e=>console.warn（e））；
}

如何在模板中呈现该数据表？我正在使用上述数组（this.dataset）并将其用作数据表数据。在模板中，我有标记。请提供模板中包含

表

元素的部分，以这种方式将无法正常工作。我建议使用使用使用vue JS构建的数据表。我还怀疑您正在尝试在vue中使用Jquery datatable。请避免这样做。我相信有很多vue中的datatables包。但是如果您非常想使用它，请仔细阅读，但也可以看看这里和这里Vueit的物化datatable for vue.jsWhere中不需要JQuery以及如何初始化该表？

   <template>
     <table id="buildings" class="mdl-data-table" width="100%"></table>
    </template>

    methods: {
        ShowModal(buildingId){
          // do something here...
        }, 
        listBuildings() {                      
         axios
            .get("https://localhost:44349/api/Building/List", headers)
            .then(response => {
              response.data.forEach(el => {            
                this.dataset.push([
                  el.buildingId,
                  el.projectName,
                  el.city,                 
                  `<a click='${this.ShowModal(el.buildingId)}'>Update</a>`  // I was trying this...        
               ]);

            $("#buildings").DataTable({
                  data: this.dataset});

           });
         }

<template>
     <table id="buildings" class="mdl-data-table" width="100%">
        <tr
            v-for="(item, index) in dataset"
            :key=(index) // or building id if u like
        >
            <td>{{ item.buildingId }}</td>
            <td>{{ item.projectName }}</td>
            <td>{{ item.city }}</td>
            <td
                @click="showModal(item.buildingId)"
            >
            click me! A not required here. U can use div if u want to have not cell clicked and style it with css
            </td>
        </tr>
     </table>
</template>
    methods: {
        showModal(buildingId){
          // do something here...
        }, 
        listBuildings() {                      
         axios
            .get("https://localhost:44349/api/Building/List", headers)
            .then(response => {
                // I suppose u have as responce here array of objects?
                this.dataset = response.data
            })
            .catch(e => console.warn(e));
        }