使用 vue.js 和 axios 提交表单数组

Question

我是 Vue 的新手，我正在构建一个搜索表单，当搜索变得更加复杂时，用户可以在其中添加行。我可以使用 Vue 和 Axios 很好地提交单个表单输入，但是在将之前的 PHP 和 HTML 表单数组 POST 过程移动到 Vue 时迷路了。表单字段都将在请求中以 JSON 格式提交给 API。

虽然我找到了大量关于如何使用 Vue 提交表单字段的信息，但我还没有找到任何与表单元素数组提交相关的信息。

表单值如下所示，根据用户的输入，可以有一组或多组。我尝试过使用和不使用基本“[]”来表示多个数组项的命名。这些在“myapp-pages”定义的 Vue 应用程序中。

<input type='text' v-model='advancedSearchForm.field' name='field' />
<input type='text' v-model='advancedSearchForm.operator' name='operator' />
<input type='text' v-model='advancedSearchForm.value' name='value' />

Vue JS 代码如下，定义了表单项并定义了 Axios POST 函数。

var app = new Vue({
    el: '#myapp-pages',
    data: {
        pages: [],
        pagecount: 0,
        advancedSearchForm: {
            field: "",
            operator: "",
            value: ""
        }
    },
    methods: {
        advancedSearch: function() {
            axios({
                url: '/api/pages/search/advanced',
                method: 'post',
                data: {
                    search: this.advancedSearchForm
                }
            })
            .then(function (response) {
                app.pages = response.data.data.pages;
                app.pagecount = response.data.data.pages.length;
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    }
})

我的问题是，在这里使用 v-model 来尝试将这些字段注册到 Vue 应用程序是否有意义？如果是这样，当用户添加更多行时，如何注册未知数量的相同 DOM 元素？如果没有，Vue+Axios如何使用这些值来提交POST请求？

感谢您的帮助。

Answer 1

您可以像使用 v-models 一样完成此操作，然后将值作为对象保存到数组中。这将让您保存输入历史记录。要向 DOM 动态添加行（或任何内容），请查找 v-for 指令。这使您可以动态地将内容添加到模板中，以便随着数组的增加，将生成更多行。