Vue-tables-2: ToggleChildRow does nothing

[19peaches]

• Vue.js version: 2.5.16
• consumed using: webpack
• FULL error message (including stack trace): no message just does nothing
• relevant code:

Table template:

<template>
    <div class="row">
        <div class="col-md-12">
            <v-client-table 
                ref="substanceTable" 
                :data="substances" 
                :columns="columns" 
                :options="options" />
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import actions from './Options/SubstanceActions'

export default {
    data () {
        return {
            columns: [... 'actions'],
            options: {
                ...
                templates: {
                    actions
                },
            }
        }
    },
    computed: {
        ...mapGetters({
            substances: 'wizard/substances'
        })
    },
    mounted() {
        bus.$on('hazard:clicked', (id) => {
            this.revealClicked(id)
        })

        this.$refs.substanceTable.toggleChildRow(3)
    },
    methods: {
        revealClicked(id) {
            this.$refs.substanceTable.toggleChildRow(id)
        }
    }
}
</script>

Actions component:

<template>
<div class="btn-group btn-group-sm" 
     role="group" 
     ref="substanceActions">
    <button type="button" 
        v-if="hasHazards"
        class="btn btn-info" 
        v-tooltip="`View Hazards`" 
        @click.prevent="showHazards">
        <span class="glyphicon glyphicon-list"></span>
    </button>
    ... 
</div>
</template>

<script>
export default {
    props: ['data', 'index'],
    computed: {
        hasHazards() {
            return this.data.hazards.length > 0
        }
    },
    methods: {
        showHazards() {
            bus.$emit('hazard:clicked', this.index)
        }
    }
}
</script>

• steps for reproducing the issue:

Neither by clicking the button in actions, nor on mounted does my childRow get toggled.

console.log of this.$refs.substanceTable clearly displays the toggleChildRow method available, and no error is thrown, but the childRow never toggles except when the actual +/- toggle is clicked, then it works fine.

I'm confused as to why it won't programmatically toggle.

Thanks.

[19peaches]

I figured it out, I needed to pass the data.id of the row and not the index.

[talapai]

Same issue.
openChildRows is not empty. But getOpenChildRows() returns empty array

in method :

 refreshChildRow(row) {
      const idx = this.$refs.table.openChildRows.indexOf(row.product_id);
      console.log('he', this.$refs.table.openChildRows, this.$refs.table.getOpenChildRows());
      if (idx > -1) {
        console.log(1);
      } else {
        this.$refs.table.toggleChildRow(row.product_id);
      }
    }

console.log returns