javascript - 将 @click 事件绑定(bind)到数组中的 href

Question

我有以下代码，用于填充数据表。 对于数据表中的每一行，我都有一个 update关联。单击 update应该调用ShowModal()方法。

如何调用ShowModal()从这里<a> ？

   <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});

           });
         }

Answer 1

我认为你想做的不是 Vue 方式，而是 JQuery 方式。所以让我向你提出更正确的代码(恕我直言)

<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));
        }