在Laravel 5.1和Vue JS中保存多个数据动态表单 [英] Saving multiple data dynamic form in Laravel 5.1 and Vue JS
问题描述
我必须添加/发布数据表单。但是，当用户点击按钮时，表单动态地增加。我已经浏览了它，并得到了一些答案，我得到像使用$ request-> all（）从输入表单获取所有数据。
然后我的问题是，我的应用程序使用VueJS作为前端。 VueJS脚本中是否有任何配置来发布动态表单中的所有数据？
我的刀片模板将会动态增加：
< div id =form-message>
{!! Form :: text（'rows [0] [DestinationNumber]'，null，[
'id'=>'recipient'，
'class'=>'form-control'，
'v-model'=>'newMessage.DestinationNumber'
]）
!!}
{!! Form :: textarea（'rows [0] [TextDecoded]'，null，[
'rows'=>'3'，
'id'=>'recipient'，
'class'=>'form-control'，
'v-model'=>'newMessage.TextDecoded'
]）
!!}
< / div> ;
零数字会增加取决于用户点击添加按钮的数量。
然后在这里我的VueJS脚本
var newSingleMessage = new Vue（{
el：'#newsinglemsg '，
data：{
newMessage：{
DestinationNumber：''，
TextDecoded：''
}，
}，
方法：{
onSubmitForm：function（e）{
e.preventDefault（）;
var message = this.newMessage;
this。$ http.post（' api / outbox'，message）;
message = {DestinationNumber：''，TextDecoded：''};
this.submitted = true;
}
}
}）;
在laravel控制器上，我有简单的逻辑来测试数据如何传递。
$ input = $ request-> all（）;
$ output = dd（$ input）;
return $ output;
然后，我使用2个额外的表单测试它。所以，数据应该是3行。结果（从FireBug检查）是这样的
{DestinationNumber：1234567890，TextDecoded：qwertyuio }
数据只传递一次，然后类型为JSON。即使我使用return $ output-> toArray（），仍然输入JSON。
哦，是的，再一次。 Idk如何使用JavaScript动态增加零号码。测试时，我只是手动添加表单。在这里，我的添加点击功能javascript
var i = 0，
clone = $（'＃form-message'） .clone（），
recipient = document.getElementById（'recipient'）;
recipient.setAttribute（'name'，'rows ['+ i +'] [DestinationNumber]'）;
clone.appendTo（'。form-message：last'）;
i ++;
对于第二行和下一行，name属性不会添加到输入元素上。
谢谢
您正在以令人困惑的方式混合blade和jquery和vue。看看这个JS小提琴用Vue完成所有这些：
https://jsfiddle.net/cr8vfgrz/10/
您基本上拥有一组使用<$ c自动映射到输入的消息$ C> v-用于。随着这些输入变化，您的消息数组发生变化。然后，当按下提交时，您只需发布 this.messages ，并将消息数组发送到服务器。然后你可以清除数组重置表单。
模板代码：
< div id =form-message>
< button class =btn btn-default@ click =addNewMessage>新信息< / button>
<模板v-for =消息中的消息>
< input type =textv-model =message.DestinationNumberclass =form-control>
< / template>
< button class =btn btn-success@ click.prevent =submitForm>提交< / button>
< / div>
Vue code：
var newSingleMessage = new Vue（{
el：'＃form-message'，
data：{
messages：[
{
DestinationNumber ：''，
TextDecoded：''
}
]，
提交：false
}，
方法：{
addNewMessage：function （）{
this.messages.push（{
DestinationNumber：''，
TextDecoded：''
}）;
}，
submitForm：函数（e）{
console.log（this.messages）;
this。$ http.post（'api / outbox'，{messages：this.messages}）
.then函数（响应）{
//处理成功
console.log（响应）;
}）。error（函数（响应）{
//处理错误
console.log（响应）
}）;
this.messages = [{DestinationNumber：''，TextDecoded：''}];
this.submitted = true;
}
}
}）;
编辑：
可以使用 $ request-> input（'messages'）; 这将是消息数组。您可以插入多个新的发件箱模型： （$请求 - >输入（ '消息'））;
或
foreach（$ request-> input（'messages'）as $ message）{
Outbox :: create（$ message）;
}
I have to add/post data form. But the form dynamically can increase as user 'click' on a button. I've already browse about it and there some answer i get like using $request->all() to fetch all data from input forms.
And then my problem is, my app using VueJS as front-end. Is there any some configuration on VueJS script to post all data from that dynamic form??
My Blade template that will be increase dynamically:
<div id="form-message">
{!! Form::text('rows[0][DestinationNumber]', null, [
'id' => 'recipient',
'class' => 'form-control',
'v-model' => 'newMessage.DestinationNumber'
])
!!}
{!! Form::textarea('rows[0][TextDecoded]', null, [
'rows' => '3',
'id' => 'recipient',
'class' => 'form-control',
'v-model' => 'newMessage.TextDecoded'
])
!!}
</div>
That zero number will increase depends on how much user click add button. And then here my VueJS script
var newSingleMessage = new Vue({
el: '#newsinglemsg',
data: {
newMessage: {
DestinationNumber: '',
TextDecoded: ''
},
},
methods: {
onSubmitForm: function(e) {
e.preventDefault();
var message = this.newMessage;
this.$http.post('api/outbox', message);
message = { DestinationNumber: '', TextDecoded: '' };
this.submitted = true;
}
}
});
On laravel controller, i have simple logic to test result how data passed.
$input = $request->all();
$output = dd($input);
return $output;
And, I test it using 2 additional form. So, the data should be 3 rows. The result (checked from FireBug) to be like this
{"DestinationNumber":"1234567890","TextDecoded":"qwertyuio"}
Data passed just one, and then the type is JSON. Even I use return $output->toArray(), type still JSON.
Oh yeah, once more. Idk how to make the zero number increase dynamically using javascript. When testing, i just manual add the form. Here my add click function javascript
var i = 0,
clone = $('#form-message').clone(),
recipient = document.getElementById('recipient');
recipient.setAttribute('name', 'rows['+ i +'][DestinationNumber]');
clone.appendTo('.form-message:last');
i++;
For second and next rows, name attribute not added on the input elements. Thanks
You're mixing blade and jquery and vue in a way that is pretty confusing. Check out this JS fiddle that accomplishes all of this with Vue:
https://jsfiddle.net/cr8vfgrz/10/
You basically have an array of messages that are automatically mapped to inputs using v-for. As those inputs change, your messages array changes. Then when submit is pressed, you just post this.messages and the array of messages is sent to server. Then you can clear the array to reset the form.
Template code:
<div id="form-message">
<button class="btn btn-default" @click="addNewMessage">New Message</button>
<template v-for="message in messages">
<input type="text" v-model="message.DestinationNumber" class="form-control">
<textarea rows="3" v-model="message.TextDecoded" class="form-control"></textarea>
</template>
<button class="btn btn-success" @click.prevent="submitForm">Submit</button>
</div>
Vue code:
var newSingleMessage = new Vue({
el: '#form-message',
data: {
messages: [
{
DestinationNumber: '',
TextDecoded: ''
}
],
submitted:false
},
methods: {
addNewMessage: function(){
this.messages.push({
DestinationNumber: '',
TextDecoded: ''
});
},
submitForm: function(e) {
console.log(this.messages);
this.$http.post('api/outbox', {messages:this.messages})
.then(function(response){
//handle success
console.log(response);
}).error(function(response){
//handle error
console.log(response)
});
this.messages = [{ DestinationNumber: '', TextDecoded: '' }];
this.submitted = true;
}
}
});
Edit:
In the controller you can use $request->input('messages'); which will be the array of messages. You can insert multiple new Outbox model using:
Outbox::insert($request->input('messages'));
or
foreach($request->input('messages') as $message){
Outbox::create($message);
}
这篇关于在Laravel 5.1和Vue JS中保存多个数据动态表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
