jbaysolutions / vue2-bootstrap-table

A sortable and searchable table, as a Vue2 component, using bootstrap styling.
118 stars 39 forks source link

Compile rendered html #3

Closed rubenwap closed 7 years ago

rubenwap commented 7 years ago

Hi,

Not sure if I am able to formulate this issue correctly, as I am pretty new to Vue.

I loved how easy it was to render a column content following the instructions:

I have my stats column, so I did

    {
    title: "Stats",
    renderfunction: renderStatsColumn
    }

And the function

let renderStatsColumn = function(colname, entry) {
  return `<div class="btn-group" role="group" >
    <button type="button" class="btn btn-sm btn-primary" @click="showModal = true"><span 
        class="glyphicon glyphicon-stats" aria-hidden="true"></span></button>
        </div>`;
};

Which worked perfectly and created the button in the proper column. However, the vue event handlers don't work.

Is the reason that the vue bootstrap table component is missing an option to compile the rendered content? (in which case I would like to raise the issue) or is it simply that I did something wrong and the component can already render html with vue event handlers?

Thanks in advance

syshex commented 7 years ago

Hey.

The way renderFunction works is by using v-html, which renders raw-html : Vue2 Documentation

So, yeah.... making your renderFunction return html with vue tags will not work.

There are 2 possible solutions I can think of: 1- allowing to specify a component in some way for each column (which would require me to go and figure out, code, and release a version with this support at some point ) 2- using a new functionality , implemented just yesterday , of row-click-handler , which allows to specify a function that receives the MouseEvent and the data for the row . Using this MouseEvent, you can evaluate what was the target (which button, if it was a button , etc) and call code accourdingly. - This feature is not available in a release yet, but available for testing in /dist folder.

I obviously understand this is not what you had in mind.

rubenwap commented 7 years ago

Actually your suggested solution 2 is not bad at all. A row click handler and then getting the click target, might work just fine. As you say this is not precisely my initial suggestion, but it sounds like it can fix my issue. I will grab it from /dist and give it a try as soon as I can, thanks!

syshex commented 7 years ago

Perfect. Please do let me know if you find any problems with that feature. I'll be making a release with this today or tomorrow if no problems are reported.

Check this comment for Documentation on this feature: Ticket 2

syshex commented 7 years ago

Released 1.1.5