dynamically add new fields to b-table [ Vue.js ]

Question

I am trying to create a table using bootstrap table with fields dynamically added. The fields that will be added will be taken from my api (see code below).

vue.js (jade) - The 2nd template will be the one to render the dynamically added fields but the problem is I can't access the row.item.members because I am not in the row scope. If there is a way to access the row data in the template tag it would be great but I already spent a day and found no luck

        b-table(small v-bind:items="plans" v-bind:fields="fields" fixed responsive)
          template(slot='bg_action', slot-scope='row')
            nuxt-link(:to="'/supply_and_demand/master/'+selected+'/'+row.item.date")
              b-button.mr-1(size='sm', variant="primary")
                | {{ row.item.date }}
          template(v-for="member_info in row.item.members" :slot="id_+ 'member_info.id'" )
            | {{ member_info.name }}

my api call (which adds new fields to the table and get the data)

async fetchData(){
    let params = { 
      "q[balancing_group_id_eq]": this.selected
    }
    this.$restApi.index('bg_members', {params})
    .then( (result)=>{
      this.fields = [
        { key: 'date', label: '' },
        { key: 'bg_action', label: 'BG' }
      ]

      for(let i = 1; i <= result.length; i++){
        this.fields.push({ key: 'id_' + result[i-1].company.id, label: result[i-1].company.name })
      }
    })
    params = { 
      "q[balancing_group_id_eq]": this.selected,
      "q[date_gteq]": this.from,
      "q[date_lteq]": this.to
    }
    this.$axios.$get('/v1/occto/plans', { params })
    .then( (result)=>{
     console.log("plans")
      console.log(this.plans)
      this.plans = result
    })
  }

tldr:I want to access the row data inside the template tag so I can dynamically set the slot which will result to data being displayed properly.

yes , slot-scope means everything inside the template if I stand correct :) — obliviousfella, Sep 05 '19 at 10:41
With slot scope you can pass data from the "parent" in this case b-table to your slot — dreijntjens, Sep 05 '19 at 10:48
template(v-for="member_info in row.item.members" :slot="id_+ 'member_info.id'" slot-scope="row") — dreijntjens, Sep 05 '19 at 10:54
But v-for="member_info in row.item.members" wont work because it is not inside the scope "row" — obliviousfella, Sep 05 '19 at 10:57
Do you have a working examplein e.g. codepen, jsfiddle or codesandbox? — dreijntjens, Sep 05 '19 at 10:59

dynamically add new fields to b-table [ Vue.js ]

0 Answers0