b-table row clicked- sub table | vuejs

<b-table

show-empty

striped

hover

:items="items"

:fields="fields"

no-local-sorting

responsive

@row-clicked="RowClick"

tbody-tr-class="normal-cursor"

>

<template v-slot:row-details="row">

<b-card id="child-table" style="cursor:context-menu">

<b-table

show-empty

striped

hover

:id="'child_items'+row.item.id"

:items="message_items"

:fields="message_fields"

responsive

tbody-tr-class="normal-cursor"

>

</b-table>

<div class="col-md-8">

<form>

<div class="form-group row">

<label class="col-md-3">

title

<span class="text-danger" style="font-weight:bold;">*</span>

</label>

<div class="col-md-9">

<b-form-textarea

id="textarea"

v-model="update_ticket.reply"

placeholder="reply"

rows="3"

max-rows="6"

></b-form-textarea>

</div>

</div>

<div class="form-group row" style="float:right;">

<div class="offset-xs-3 col-xs-9">

<button

type="button"

class="btn btn-primary text-right ma-10px"

@click="updateMessage"

>Submit</button>

</div>

</div>

</form>

</div>

</b-card>

</template>

</b-table>

RowClick(row_data) {

this.update_ticket.ticket_id=row_data.id;

row_data['show_submit_next_level_button'] = false;

if (row_data.hasOwnProperty.call('_showDetails') && row_data._showDetails) {

this.$set(row_data, '_showDetails', false);

} else {

this.items.forEach(row => {

if (row.id == row_data.id) {

this.message_items = row.message;

this.$set(row, '_showDetails', true);

} else {

this.$set(row, '_showDetails', false);

}

})

}

},

forceRerender: function() {

this.renderComponent = false;

this.$nextTick(() => {

this.renderComponent = true;

});

},

after submit render

this.getActiveTickets();

this.forceRerender();

renderComponent: true,