Vue bootstrap table: button in column not rendering

Question

I have a Vue Bootstrap table with a "cosimo" column that includes a button to launch a modal. However, the button is not rendering properly and does not work when clicked. Here is the code for the column:

columns: [
{
  title: "Cosimo",
  field: "component.name",
  sortable: true,
  formatter: (value, row, index) => {
    return `
      <b-button v-b-modal.modal-1 @click="showModal"
        >Launch demo modal</b-button
      >
  `;
  }
}, ...]

I've checked the Vue Bootstrap documentation and I believe I've followed the correct syntax for creating a button that launches a modal. However, the button is not working and the HTML is not rendering properly. Can anyone help me identify the issue? Thanks in advance! It works outside the table in the template part.

EDIT I am rendering the column with this code:

<bootstrap-table
  ref="table"
  :columns="columns"
  :data="data"
  :options="options"
  @on-load-success="tableLoaded"
>
  <template v-slot:cell(component.name)>
    <span><b-btn @click="showModal(item)">Launch Demo Modal</b-btn></span>
  </template>
</bootstrap-table>

And then the columns entry:

        {
      title: "Cosimo Recommendation",
      field: "component.name",
      sortable: true
    },

Jayesh Tharwani · Accepted Answer · 2023-02-19 09:12:39Z

2

I'm not sure which version of bootstrap-vue you're using, but if you're on version 2.23.0, then you can use slots for adding buttons and other HTML elements, see below example of info model button in documentation:

https://bootstrap-vue.org/docs/components/table#complete-example

answered Feb 19, 2023 at 9:12

Jayesh Tharwani

1261 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rohìt Jíndal · Accepted Answer · 2023-02-19 14:53:07Z

1

You can achieve this by using slot in the template itself for that particular column.

<b-table :items="items" :fields="fields">
    <template v-slot:cell(<component.name>)="{ item }">
      <span><b-btn @click="showModal(item)">Launch Demo Modal</b-btn></span>
    </template>
</b-table>

You can see cell({key}) slot here

answered Feb 19, 2023 at 14:53

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

1 Comment

Cactus Over a year ago

Thank you for the feedback. However, when I try the line with (<component.name>)="{item}"> I get a formatting error and the app does not render on the npm run serve. I am sorry for beginner questions, I am trying to sllightly modify existing code for my use case but my expertise is in React.

Collectives™ on Stack Overflow

Vue bootstrap table: button in column not rendering

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related