How to use a Vue component with detailFormatter

[stevespringett]

Hello. I'm trying to use a Vue component with detailFormatter. The idea is that a user would click a row, which would then expand, and a normal Vue component would be displayed.

I have tried to programmatically instantiate a Vue component and render out the HTML. This works, but it lacks the interactivity of a Vue component. So it's fine for static content, but not for dynamic.

I took a look at the mixin here: https://github.com/wenzhixin/bootstrap-table-examples/blob/develop/vue-starter/src/mixins/table.js and the blog from https://blog.bootstrap-table.com/2019/08/10/formatter-use-vue-component/ but these do not appear to work with detailFormatters.

Any idea how I can get this to work?

This works for static data:

detailFormatter: function (index, row) {
  // Programmatically instantiate MyComponent Vue component
  let ComponentClass = Vue.extend(MyComponent);
  let component = new ComponentClass({
    propsData: {
      myData: row
    }
  });
  component.$mount();
  return component.$el.outerHTML;
},

However, because it's static, the data from the row is never rendered, nor can it change over time.

Ideally, what I'd like to have is:

detailFormatter: function (index, row) {
  return this.vueFormatter({
    template: '<my-component :my-data="row" />',
    data: { row },
  })
}

And have the component be reactive like every other Vue component. Any idea how I can achieve this?

[wenzhixin]

I think this answer can help you: https://stackoverflow.com/questions/58773459/bootstrap-table-vuejs-onexpandrow-event-integration/58780532#58780532.

[stevespringett]

Fantastic. Exactly what I was looking for. Thank you.