Bind a @click event to href in Array

Question

I have the following code which I am using to populate a datatable. For each row in the datatable, I have an update link. clicking the update should call the ShowModal() method.

How can I call ShowModal() from this <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});

           });
         }

I am using the above array (this.dataset) and use it as the datatable data. in the template I have the <table> tag — Eyal
– Eyal, Commented Dec 28, 2018 at 16:23
please provide that part from your template that contains table element — Boussadjra Brahim
– Boussadjra Brahim, Commented Dec 28, 2018 at 16:25
<table id="buildings" class="mdl-data-table" width="100%"></table> — Eyal
– Eyal, Commented Dec 28, 2018 at 16:26
in this way that will not work properly i recommend to use a data table built using vue js — Boussadjra Brahim
– Boussadjra Brahim, Commented Dec 28, 2018 at 16:33

webmint · Accepted Answer · 2018-12-28 17:57:13Z

1

I think what u are trying to do its not Vue way, but JQuery way. So let me propose to u more correct code (IMHO)

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

answered Dec 28, 2018 at 17:57

webmint

2191 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

webmint Over a year ago

Also I'm supossing u are trying to use Jquery DataTable in vue. Please avoid to do so. There is I belive many packages for datatables in vue. But if you dying to use this, well read this datatables.net/forums/discussion/25111/hyperlink-in-td

webmint Over a year ago

But take also look here onewaytech.github.io/vue2-datatable/doc/#/en and here vuetable.com No need for JQuery in Vue

Eyal Over a year ago

it's materialized datatable for vue.js

Eyal Over a year ago

Where and how you initialize the table ?

Collectives™ on Stack Overflow

Bind a @click event to href in Array

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related