click event inside renderActionColumn not working

[Masber]

I am putting a button inside a cell and I would like to throw an alert when its pressed. I am using renderActionColumn to render the button with it's properties "v-on:click="showEditUserModal()"". However the method showEditUserModal is not executed after click.

Why is that?

My code:

<script>
    var renderActionColumn = function (colname, entry) {
        return '<div class="btn-group" role="group" >'+
            '  <button type="button" id="editLocation" name="editLocation" v-on:click="showEditUserModal()" class="btn btn-sm btn-primary"> Edit <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>' +
            '  <button type="button" id="deleteLocation" name="deleteLocation" class="btn btn-sm btn-danger"> Delete <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>' +
            '</div>'
    };
</script>

<script>
new Vue({
    el: '#app',
    mixins: [ mixinLocation ],
    components: {
        VueBootstrapTable: VueBootstrapTable
    },
    mounted: function () {

        this.checkToken();

        this.getLocations(this.$data.token, "SHIPPER")
        .done((response) => {

            response.forEach(l => {
                this.$data.values.push(l)
            });
        })
        .fail(function(jqXHR){
            alert(jqXHR.statusText + ": " + jqXHR.responseText);

            if (jqXHR.status === 401 || jqXHR.status === 403) {
                redirectToLoginPage(baseUrl);
            }
        });
    },
    data: function () {
      return {
        tblClass: 'table-bordered',
        columns: [
            { title: 'Name', name: 'firstName' },
            { title: 'Contact Number', name: 'contactNumber' },
            { title: 'Email', name: 'email' },
            { title: 'Address', name: 'address' },
            { title: 'Suburb', name: 'suburb' },
            { title: 'State', name: 'state' },
            { title: 'Country', name: 'country' },
            { title: 'Actions', renderfunction: renderActionColumn }
        ],
        values: []
      }
    },
    methods: {
        showEditUserModal: function(){
            alert("Hi!!!!!");
        }
    }
});

thank you very much
</script>

[syshex]

The reason is, when the render function is called, to draw the button inside the cell, the vue processing bit is over and done with, so adding vue tags and directives won't do any good because at that stage they are not processed anymore.

One way to go about it is to define a vue variable for the vue object , like so:

var vueApp = new Vue(.....

Then, instead of v-on:click , on the render function, you can do a normal javascript onclick and call the vueApp.method .

I know this isn't ideal.

[Masber]

Is there a way to put renderActionColumn inside Vue?

[syshex]

Nope. Maybe we could do something along the lines of making the render a vue component instead of taking a javascript function, that could possibly work, but not with the current version.