vue.js - 我想在按下添加按钮时添加新行，并且每个添加的行都应该有一个删除按钮来删除该行

Question

这是我在其中定义了一个表的代码

<table v-if="Object.keys(content_state).length >= 1" class="editable-table" id="table_value">
                                    <thead>
                                        <tr>
                                            <th class="editable-tabidle-header">Field</th>
                                            <th class="editable-table-header">Value</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(pageDataItem, idx) in content_state" :key="idx" class="editable-table-row">
                                            <td class="editable-table-data">
                                                <div>{{pageDataItem.modified_keyword}}</div>

                                            </td>
                                            <td class="editable-table-data">
                                                 <div>
                                                    <b-form-input v-model="pageDataItem.formatted_text" @click="input_form($event)" id= "'pageDataItem.modified_keyword + idx'" :style="{'border': '2px solid rgb(' + 
                          pageDataItem.color[0] + ',' + pageDataItem.color[1] + ',' +
                          pageDataItem.color[2] + ')', 'border-radius': '4px'}" v-on:dblclick="showModal($event, 0)" plaintext ></b-form-input>
                                                </div>
                                               <b-btn variant="success" @click="Add(id)" id="Add-button">Add</b-btn>
                                            </td>

                                        </tr>
                                    </tbody>
                                </table>

Javascript代码是

 public AddRow(id:any)
   {
        console.log(id)
        var x =1;
        let d = document.getElementById(id);
        console.log(id)
        let clone = d.firstElementChild.cloneNode(true);
        clone.value = '';
        clone.id= id+x; 


        this.last_added_row = clone.id;      
        d.appendChild(clone);
    }

我应该如何在生成的每个新行中添加删除按钮？每行应该只有一个添加按钮和与输入框一样多的删除按钮。

标签： vue.js