Я новичок в Vue и создаю форму поиска, к которой пользователь может добавлять строки, поскольку поиск становится более сложным. Я могу использовать Vue и Axios для отправки единственного точного ввода формы, но теряюсь при перемещении предыдущего процесса POST массива форм PHP и HTML в Vue. Все поля формы будут отправлены в API в виде JSON в запросе.
Хотя я нашел много информации о том, как отправить поле формы с помощью Vue, я не нашел ничего, что говорило бы об элементе формыотправка массива.
Значения формы выглядят так, как показано ниже, и их может быть один или несколько наборов на основе ввода пользователя. Я попытался назвать с и без основного "[]", чтобы указать несколько элементов массива. Они находятся в приложении Vue, как определено в «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' />
Код 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-модель здесь, чтобы попытаться зарегистрировать эти поля в приложении Vue? Если так, как я могу зарегистрировать неизвестный номер того же элемента DOM, когда пользователь добавляет больше строк? Если нет, то как Vue + Axios может использовать эти значения для отправки запроса POST?
Спасибо за любую помощь.