Question

我正在尝试使用具有动态添加字段的引导表来创建表。将要添加的字段将从我的api中获取（请参见下面的代码）。

vue.js（玉）-第二个模板将是呈现动态添加的字段的模板，但问题是我无法访问row.item.members，因为我不在行范围内。如果有一种方法可以访问模板标签中的行数据，那就太好了，但是我已经花了一天的时间却没有运气

        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 }}

我的api调用（它将新字段添加到表中并获取数据）

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：我想访问模板标记内的行数据，以便动态设置插槽，这将导致数据正确显示。

动态地向b表添加新字段[Vue.js]

0 个答案: