Creating a new editable row in a b-table without jquery in bootstrap-vue

Question

I'm trying to create something like this demo in vueJs, I'm using b-table from bootstrap-vue.

this is the b-table I've made

                    <b-row>
                        <b-col>
                            <b-table
                                show-empty
                                stacked="md"
                                :items="fetched_classf"
                                :fields="classes"
                                :current-page="currentPage"
                                :per-page="perPage"
                                :filter="filter"
                                :sort-by.sync="sortBy"
                                :sort-desc.sync="sortDesc"
                                :sort-direction="sortDirection"
                                @filtered="onFilteredDept"
                                id="tabel"
                                >
                                <template slot="id" slot-scope="row" style="text-align: left">
                                    {{ row.value }}
                                </template>

                                <template class="add_desc" slot="class_desc" slot-scope="row">
                                    {{ row.value }}
                                </template>

                                <template slot="action" slot-scope="row">
                                        <b-button size="sm" class="mr-1" style="padding: 0rem 2px;">
                                            <i class="fa fa-trash fa-lg "></i>
                                        </b-button>
                                </template>

                                <template slot="row-details" slot-scope="row">
                                    <b-card>
                                    <ul>
                                        <li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value }}</li>
                                    </ul>
                                    </b-card>
                                </template>

                                <template slot="selectedDept" slot-scope="{ rowSelected }">
                                    <span v-if="rowSelected">✔</span>
                                </template>
                            </b-table>
                        </b-col>
                    </b-row>

and this is the method to add the new row:

        addRow(){
            this.clicked = true;
            var input = document.createElement("input");
            input.setAttribute('type', 'text');
            var parent = document.getElementById("tabel");
            parent.appendChild(input);


            this.idbaru = this.terbesar;
            var id_incremented =  this.idbaru+1
            console.log ('id_incremented ',id_incremented)
            this.fetched_classf.push({id: id_incremented, dept_id: id_incremented, class_desc: input})
            this.terbesar = id_incremented
        },

I end up getting something like this: picture I don't have any ideas since I'm new to this template

Answer 1

Do you want to only add one row?

If it's the case, you can use this solution below:

<tr v-if="displayNewRow">
  <td> <input/> </td>
  <td> <input/> </td>
  <td> <input/> </td>
</tr>

And you set the variable displayNewRow to false at the beginning, but when you want to display it you can set this variable to true.