Tables Custom rendering

I am a totally newbie here.

In the Tables Custom rendering example, it says:

<template slot="name" scope="field">
      {{field.name.first}} {{field.name.last}}
</template> 

So, why in the example after “Custom rendering” section:

<template slot="actions" scope="item">
       <b-btn size="sm" @click="details(item.item)">Details</b-btn>
</template>

shouldn’t the scope be “field” ?

And in fact, I have tried both (scope=“item” and scope=“field” ), but the button won’t show up in my page… I am totally lost… (but the custom rendering button seems to work on jsfiddle no problem…)

Here is snippet of my code:

<template>
<div>
<b-table striped bordered hover show-empty responsive :items="items" :fields="fields">
      <template slot="wonumber" scope="item">
        {{item.wonumber}}
      </template>
      <template slot="status" scope="item">
        {{item.value.status}}
      </template>
      <template slot="actions" scope="field">
        <b-btn variant="primary" @click="details(item.item)">Change Status</b-btn>
      </template>-->
    </b-table>
</div>
</template>
<script>
export default {
  data() {
    return {
      items: [
          {
          wonumber: 'wonumber_001',
          status: true
        }, {
          wonumber: 'wonumber_002',
          status: true
        }
      ],
      fields: {
        wonumber: {
          label: 'WO Number'
        },
        status: {
          label: 'Status'
        },
        actions: {
          label: 'Actions'
        }
      }
    }
  },
  methods: {
    details(item) {
      alert(JSON.stringify(item))
    }
  }
}
</script>

I am using the newest 0.16.1, everything else seem working properly, except the custom button won’t show up… Thank you in advance for any tips.

[neildchen]

Hello @alexsasharegan I already have. Thank you.

[tmorehouse]

Check out PR #433

I’ve added some clarity and improved example for scope slots. I know the documentation (and scoped slots) confused me a bit, so I’ve updated it to make usage more clear (using item or field as the scope variable can be confusing with the items and fields data).

@neildchen The scope="variable" creates a local template variable that contains the properties passed to the named slot. The variable will contain the properties:

• value - the fields value (or null if a virtual column/field)
• item - the entire item record object
• index - the row number (zero based counter)