1

I am getting vue components from server like this:

Vue.component('events', function(resolve, reject){
    template: response.data
})

where response.data is the html from the server

Now i am using JQuerys Data Tables to display some data and i want to add a button in one of the columns that will be a vue-component and that will execute a method on click from the main component where the data table is initialized.

However because i am building the Data tables from server, by the time i finish building the table, the main component is already mounted and the buttons v-on:click event doesn't work.

I tried with several answers i've found on google about similar topic but couldn't solve it.

Here's my code that i am using to fill the datatable:

mounted(){
    events = [];
    let self = this.$data;
    self.dataTable = $("#events-table").DataTable({});
    Request.call("event", "get", null, null, "GET", "JSON")
       .then(function(response){
           let evts = response.data.events;
           if(evts.length > 0){
              evts.map(function(event){
              events.push(event);
           })

           let button = {
              props: ['text'],
              methods:{
                 testing(){
                     this.$emit('testing');
                 }
              },
              template: '<button id="tester" v-on:click="testing">{{ text }}</button>'
          };

          let btnComp = Vue.extend(button);

          let btn = new btnComp({
              propsData: {
                 text: 'kire'
              }
          }).$mount();

          events.map(function(event,index){
             self.dataTable.row.add([
                event.Region,
                event.Title,
                event.ImageURL,
                event.Link,
                event.Description,
                event.Type,
                event.IsActive,
                '<div class="tester"></div>'
             ]).draw(false);
           })
           $(".tester").append(btn.$el);
         }
      })
},

I am new at Vue & don't have pretty much experience at it, so every answer is appreciated.

5
  • By any chance you tried running that on beforeMount lifecycle hook? vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks Commented Apr 10, 2019 at 15:55
  • I just tried that now, my data table doesn't render if i call it in beforeMount ..
    – Celestial
    Commented Apr 10, 2019 at 17:12
  • Shameless plug, if you're referring to datatables.net/jQuery DataTables then my plugin may be of help: github.com/niiknow/vue-datatables-net
    – Noogen
    Commented Apr 17, 2019 at 18:28
  • Oh maybe it could be from some use, but we are avoiding node.js in the project.. and thats kinda making things complicated.
    – Celestial
    Commented Apr 17, 2019 at 18:30
  • Uhhh, it's not for NodeJS, it's a vue2 wrapper for the plugin you're using jQuery DataTables. Sarcastically, how do you avoid NodeJS? Do you not use webpack? Do you not use Vue? NodeJS is required to compile and packges them.
    – Noogen
    Commented Apr 18, 2019 at 2:32

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.