Bind a @click event to href in Array

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



           });

         }

edited Dec 28 '18 at 16:28

asked Dec 28 '18 at 16:15

Eyal

2,08952241

how are you rendering that data table inside template?

– Boussadjra Brahim
Dec 28 '18 at 16:19

I am using the above array (this.dataset) and use it as the datatable data. in the template I have the <table> tag

– Eyal
Dec 28 '18 at 16:23

1

please provide that part from your template that contains table element

– Boussadjra Brahim
Dec 28 '18 at 16:25

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

– Eyal
Dec 28 '18 at 16:26

1

in this way that will not work properly i recommend to use a data table built using vue js

– Boussadjra Brahim
Dec 28 '18 at 16:33

|
show 1 more comment

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



           });

         }

edited Dec 28 '18 at 16:28

asked Dec 28 '18 at 16:15

Eyal

2,08952241

how are you rendering that data table inside template?

– Boussadjra Brahim
Dec 28 '18 at 16:19

I am using the above array (this.dataset) and use it as the datatable data. in the template I have the <table> tag

– Eyal
Dec 28 '18 at 16:23

1

please provide that part from your template that contains table element

– Boussadjra Brahim
Dec 28 '18 at 16:25

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

– Eyal
Dec 28 '18 at 16:26

1

in this way that will not work properly i recommend to use a data table built using vue js

– Boussadjra Brahim
Dec 28 '18 at 16:33

|
show 1 more comment

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



           });

         }

edited Dec 28 '18 at 16:28

asked Dec 28 '18 at 16:15

Eyal

2,08952241

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



           });

         }

javascript vue.js

edited Dec 28 '18 at 16:28

asked Dec 28 '18 at 16:15

Eyal

2,08952241

edited Dec 28 '18 at 16:28

asked Dec 28 '18 at 16:15

Eyal

2,08952241

edited Dec 28 '18 at 16:28

asked Dec 28 '18 at 16:15

Eyal

2,08952241

asked Dec 28 '18 at 16:15

Eyal

2,08952241

asked Dec 28 '18 at 16:15

Eyal

2,08952241

how are you rendering that data table inside template?

– Boussadjra Brahim
Dec 28 '18 at 16:19

I am using the above array (this.dataset) and use it as the datatable data. in the template I have the <table> tag

– Eyal
Dec 28 '18 at 16:23

1

please provide that part from your template that contains table element

– Boussadjra Brahim
Dec 28 '18 at 16:25

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

– Eyal
Dec 28 '18 at 16:26

1

in this way that will not work properly i recommend to use a data table built using vue js

– Boussadjra Brahim
Dec 28 '18 at 16:33

|
show 1 more comment

how are you rendering that data table inside template?

– Boussadjra Brahim
Dec 28 '18 at 16:19

I am using the above array (this.dataset) and use it as the datatable data. in the template I have the <table> tag

– Eyal
Dec 28 '18 at 16:23

1

please provide that part from your template that contains table element

– Boussadjra Brahim
Dec 28 '18 at 16:25

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

– Eyal
Dec 28 '18 at 16:26

1

in this way that will not work properly i recommend to use a data table built using vue js

– Boussadjra Brahim
Dec 28 '18 at 16:33

how are you rendering that data table inside template?

– Boussadjra Brahim
Dec 28 '18 at 16:19

I am using the above array (this.dataset) and use it as the datatable data. in the template I have the <table> tag

– Eyal
Dec 28 '18 at 16:23

please provide that part from your template that contains table element

– Boussadjra Brahim
Dec 28 '18 at 16:25

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

– Eyal
Dec 28 '18 at 16:26

in this way that will not work properly i recommend to use a data table built using vue js

– Boussadjra Brahim
Dec 28 '18 at 16:33

|
show 1 more comment

1 Answer
1

active

oldest

votes

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 '18 at 17:57

webmint

1011

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
Dec 28 '18 at 18:04

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

– webmint
Dec 28 '18 at 18:05

it's materialized datatable for vue.js

– Eyal
Dec 28 '18 at 18:52

Where and how you initialize the table ?

– Eyal
Dec 28 '18 at 19:01

I changed to Vuetable-2. thanks.

– Eyal
Dec 28 '18 at 19:42

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53961331%2fbind-a-click-event-to-href-in-array%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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 '18 at 17:57

webmint

1011

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
Dec 28 '18 at 18:04

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

– webmint
Dec 28 '18 at 18:05

it's materialized datatable for vue.js

– Eyal
Dec 28 '18 at 18:52

Where and how you initialize the table ?

– Eyal
Dec 28 '18 at 19:01

I changed to Vuetable-2. thanks.

– Eyal
Dec 28 '18 at 19:42

add a comment |

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 '18 at 17:57

webmint

1011

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
Dec 28 '18 at 18:04

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

– webmint
Dec 28 '18 at 18:05

it's materialized datatable for vue.js

– Eyal
Dec 28 '18 at 18:52

Where and how you initialize the table ?

– Eyal
Dec 28 '18 at 19:01

I changed to Vuetable-2. thanks.

– Eyal
Dec 28 '18 at 19:42

add a comment |

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 '18 at 17:57

webmint

1011

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 '18 at 17:57

webmint

1011

answered Dec 28 '18 at 17:57

webmint

1011

answered Dec 28 '18 at 17:57

webmint

1011

answered Dec 28 '18 at 17:57

webmint

1011

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
Dec 28 '18 at 18:04

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

– webmint
Dec 28 '18 at 18:05

it's materialized datatable for vue.js

– Eyal
Dec 28 '18 at 18:52

Where and how you initialize the table ?

– Eyal
Dec 28 '18 at 19:01

I changed to Vuetable-2. thanks.

– Eyal
Dec 28 '18 at 19:42

add a comment |

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
Dec 28 '18 at 18:04

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

– webmint
Dec 28 '18 at 18:05

it's materialized datatable for vue.js

– Eyal
Dec 28 '18 at 18:52

Where and how you initialize the table ?

– Eyal
Dec 28 '18 at 19:01

I changed to Vuetable-2. thanks.

– Eyal
Dec 28 '18 at 19:42

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
Dec 28 '18 at 18:04

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

– webmint
Dec 28 '18 at 18:05

it's materialized datatable for vue.js

– Eyal
Dec 28 '18 at 18:52

Where and how you initialize the table ?

– Eyal
Dec 28 '18 at 19:01

I changed to Vuetable-2. thanks.

– Eyal
Dec 28 '18 at 19:42

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk