Vue.js 我想在按下add按钮时添加新行，每添加一行，就会有一个delete按钮来删除该行

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

<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>

---

如何在生成每一新行时添加“删除”按钮？每行只能有一个添加按钮，删除按钮的数量应与输入框的数量相同。

是否可以添加一个？你的一些HTML被破坏了。。你能告诉我html在哪里被破坏了吗？因为这是我需要更改的部分，第12行是一个结束标记，没有相应的开始标记。同样，第20行有一个不会关闭的开始标记。我想这可能是复制粘贴错误，但每个IDE通常都会发现这一点。谢谢回复。这是我的错误。我已经更正了代码，非常感谢。您能否提供一个最小的、可复制的示例，并告诉我们您的困难在哪里，以及您已经尝试了什么？添加新行应该与向

content\u state

数组添加元素一样简单，而且鉴于您已经在使用

v-for

，我不确定您到底遇到了什么问题。

 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);
    }