点击事件后动态添加的 HTML 元素答案

【问题标题】：Dynamically added HTML element after click event点击事件后动态添加的 HTML 元素
【发布时间】：2019-11-30 07:35:08
【问题描述】：

我不知道如何在我的 Vue js 2 应用程序中添加动态内容。单击按钮后，我想添加许多 div 元素。这个 div 应该有输入，点击 Save 按钮后，动态创建的 div 中的所有输入文本都应该发送到后端（所以我在模板中使用模型）。

<div v-if="!this.spinnerVisibleForCorrectiveActions">
                <div>
                    <table class="p-2 table-cell">
                        <tr class="font-weight-bold">
                            <td class="vue-good-table-col-200">
                                <div class="mt-2 criterion">
                                    ID
                                </div>
                            </td>
                            <td class="vue-good-table-col-200">
                                <div class="mt-2 criterion">
                                    DZIAŁANIE
                                </div>
                            </td>
                            <td class="vue-good-table-col-200">
                                <div class="mt-2">
                                    SZCZEGÓŁY
                                </div>
                            </td>
                        </tr>
                        <tr v-for="(actions,index) in correctiveActions" :key="index">
                            <td class="vue-good-table-col-200">
                                <span> {{actions.orderNumber}}</span>
                            </td>
                            <td class="vue-good-table-col-200">
                                <span> {{actions.action}}</span>
                            </td>
                            <td class="vue-good-table-col-200">
                                <span> {{actions.recommendations}}</span>
                            </td>
                        </tr>
                    </table>
                    <button class="addAction p-3 mb-2 bg-secondary text-white w-100 bg-info btn btn-success">NAdd new action</button>
                    <br>
                </div>

如何动态添加（多次）类似这样的内容，另外还有可能在单击按钮后从我动态创建的输入中获取所有数据：

 <tr v-for="(actions,index) in correctiveActions" :key="index">
                                    <td class="vue-good-table-col-200">
                                        <span> {{actions.orderNumber}}</span>
                                    </td>
                                    <td class="vue-good-table-col-200">
                                        <span> {{actions.action}}</span>
                                    </td>
                                    <td class="vue-good-table-col-200">
                                        <span> {{actions.recommendations}}</span>
                                    </td>
                                </tr>

【问题讨论】：

标签： vuejs2

【解决方案1】：

好的，就我而言，答案很简单——我只需要在我的 CorrectiveActions 数组中添加一个空对象：

<button class="addAction p-2 mb-2 bg-secondary text-white w-100 bg-info btn btn-success" @click="addNewAction">Nowe
                        działanie
                    </button>

接下来：

methods:{
 addNewAction() {
                this.correctiveActions.push
                ({
                    id: undefined,
                    incidentId: this.incidentId,
                    orderNumber: this.getNextOrderNumber(),
                    action: undefined,
                    recommendations: undefined
                });
            },
}

【讨论】：