I have the current structure in my ponent:

<data-table>
    <template slot="column" field="a"></template>
    <template slot="column" field="b"></template>
    <template slot="column" field="c"></template>
</data-table>

How do I iterate through these "columns" when rendering my data-table?

Edit: turns out adding refs to my columns didn't work, since according to the docs the refs are only stored in their variable when the ponents are actually rendered. Instead, I used the $slots variable to iterate over the columns on the mounted method, like this:

mounted: function() {
    this.$slots.column.forEach(
        //my code...
    );
}

I have the current structure in my ponent:

<data-table>
    <template slot="column" field="a"></template>
    <template slot="column" field="b"></template>
    <template slot="column" field="c"></template>
</data-table>

How do I iterate through these "columns" when rendering my data-table?

Edit: turns out adding refs to my columns didn't work, since according to the docs the refs are only stored in their variable when the ponents are actually rendered. Instead, I used the $slots variable to iterate over the columns on the mounted method, like this:

mounted: function() {
    this.$slots.column.forEach(
        //my code...
    );
}

• javascript
• vue.js

• You could assign a ref to each of them vuejs/v2/guide/… (possibly not the best solution, but the first that came to mind), ie <template slot="column" field="a" ref="col_1"></template> – admcfajn Commented Jan 25, 2019 at 19:46

3 Answers 3

As mentioned, $ref is the best approach to doing what you want. Use ref carefully. It can get heavy on the user's machine.

// template

<data-table>
    <template slot="column" field="a" ref="columns"></template>
    <template slot="column" field="b" ref="columns"></template>
    <template slot="column" field="c" ref="columns"></template>
</data-table>

// script

{
  ...
  mounted() {
    this.$refs.columns.forEach(col => {
      // Do something with `col`
      console.log(col)
    })
  }
}

Basically, if you have more than 1 ref with an identical name (like 'columns'), that reference will be converted to a VueComponent[] (i.e. an array of vue ponents).

When you create slots, you can set dynamic names. Sample ponent:

<table>
  <tr>
    <td v-for="(slot,ind) in loopdata">
     <slot :name="'col'+ind" :data="slot"></slot>
    </td>
  </tr>
</table>

then use slots:

<data-table>
    <template slot="col1" slot-scope="{data}"></template>
    <template slot="col2" slot-scope="{data}></template>
    <template slot="col3" slot-scope="{data}></template>
</data-table>

Have you tried a v-for iteration when rendering your data-table?, and create the columns based on a data property?

Such as:

<template v-for="(col,index) in columns" slot="col.column" field="col.a"></template>