Форма Vuejs получает несколько значений в массиве
У меня есть форма, которая показывает несколько входных данных на основе данных базы данных, и мне нужно получить каждый ввод value плюс их id, когда я отправляю свою форму.
Окончательный результат этой формы, когда я ее отправлю, должен быть примерно таким:
array:2 [
0 => [
id => 1,
value => "123
],
1 => [
id => 5,
value => "test"
]
]
в настоящее время я получаю это (только значения):
array:2 [
0 => "123"
1 => "test"
]
Код
<form ref = "form" :model = "form" enctype = "multipart/form-data">
<div class = "row">
<div
class = "col-md-6"
v-for = "(field, index) in fields"
:key = "index"
>
<input
class = "form-control"
v-model = "form.field[index]"
:placeholder = "field.title"
/>
</div>
</div>
<vs-button
class = "mt-3"
@click = "onSubmit"
native-type = "submit"
gradient
>
Generate
</vs-button>
</form>
data() {
return {
fields: [],
form: {
field: [],
},
};
},
methods: {
onSubmit(e) {
e.preventDefault();
axios
.post("/api/admin/documents/add/", this.form, {...} // sending "this.form"
}
Есть идеи?
fields массив, как если бы он использовался в v-for -> v-for = "(field, index) in fields"так почему идентификатор должен быть 1 и 5? конечно, они будут 0 и 1 для двух элементов - так работают массивы
@Bravo, о чем вы говорите, это index номер, а не идентификатор, идентификатор моих данных выглядит как field.id, как у меня field.title
о, так массив полей имеет идентификатор ... используйте его
тогда чем будет отличаться? Я хочу, чтобы идентификатор был переменной внутри моего form.field, а не идентификатором form.field, пожалуйста, просто посмотрите мой пример кода, который я ищу
да, правильно, поместите идентификатор в поле form.field
@Bravo это именно то, что я ищу, как?
@Браво, понятия не имеешь?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Позвольте мне знать, если это помогает.
var app = new Vue({
el: '#app',
data() {
return {
message: "Vue 2",
fields: ["First Name", "Last Name"],
myForm: []
};
},
mounted() {
this.myForm = this.fields.map((field, index) => ({
id: index+1,
title: field,
value: ""
}));
},
methods: {
save(){
console.info(this.myForm)
}
}
})<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id = "app">
<h1>{{ message }}</h1>
<div>
<div v-for = "(form, index) of myForm">
<label>{{ form.title }}</label>
<input :placeholder = "form.title" v-model = "form.value" name = "index" />
</div>
<button type = "submit" @click.stop.prevent = "save">Submit</button>
</div>
<p>{{myForm}}</p>
</div>Привет, спасибо за ответ, но я думаю, что вы немного перепутали вещи. во-первых, мой v-for = "(form, index) of myForm" не основан на форме, а основан на базе данных, основанной на том, что у меня есть динамические данные, представленные массивом fields, во-вторых, мне действительно не нужно отправлять index числа, но ids моего массива fields что-то вроде field.id на v-for = "(field, index) in fields" есть идеи по этому поводу?
это ваша модель поля => fields: [{id:1,title: "Имя"}, {id:4,title: "Фамилия"}],
Например, потребовалась небольшая настройка вместо использования mounted(). Мне пришлось поместить его в then() моего axios, где я получил данные массива fields.... но теперь у меня работает, спасибо.
подождите, есть проблема, данные формы не названы, поэтому я просто получаю ключевые номера в своем контроллере, что затрудняет работу с входящими запросами и зацикливание их, есть ли способ поместить имя этих массивов вместо числа? как у меня было field: {...data here...}
Я могу помочь вам, если вы можете предоставить пример кода.
исправлено, я добавил имя в axios axios.post(url, { fields: this.myForm }, {...});, чтобы я мог получить его в контроллере
откуда должен взяться идентификатор?