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

Question

I'm new to Vue and building a search form that the user can add rows to as the search gets more complex. I can use Vue and Axios to submit a single form input fine, but am lost when moving the previous PHP and HTML form array POST process to Vue. The form fields will all be submitted to an API as JSON in the request.

While I have found plenty of info on how to submit a form field with Vue, I haven't found anything that speaks to form element array submission.

The form values look like the below and there can be one or more sets of these based on the user's input. I have tried naming with and without the basic "[]" to indicate multiple array items. These are in the Vue app as defined by "myapp-pages".

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

The Vue JS code is the following with the form items defined and the Axios POST function defined.

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

My questions are, does the use of v-model make sense here to try and register those fields with the Vue app? If so, how can I register an unknown number of the same DOM element as the user adds more rows? If not, how can Vue+Axios use these values to submit the POST request?

Thanks for any help.

Answer 1

You can accomplish this as you are with v-models and then saving values as an object to an array. This will let you save the input history. For dynamically adding rows (or anything) to the DOM, look up the v-for directive. This lets you dynamically add things to the template so that as the array increases, more rows will be generated.