在 Laravel 5.1 和 Vue JS 中保存多个数据动态表单

Saving multiple data dynamic form in Laravel 5.1 and Vue JS

本文关键字：保存 数据 表单 动态 JS Laravel Vue      更新时间：2023-09-26

我必须添加/发布数据表单。但是，当用户"单击"按钮时，表单可能会动态增加。我已经浏览了它，并且有一些答案，例如使用 $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: ''
    },
},
methods: {
    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。即使我使用返回$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，这非常令人困惑。 看看这个用 Vue 完成所有这些的 JS 小提琴：

https://jsfiddle.net/cr8vfgrz/10/

您基本上有一个消息数组，这些消息使用 v-for 自动映射到输入。 随着这些输入的变化，您的messages数组也会发生变化。 然后，当按下提交时，您只需发布this.messages消息数组即可发送到服务器。 然后，您可以清除数组以重置表单。

模板代码：

<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 代码：

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

编辑：

在控制器中，您可以使用$request->input('messages');这将是消息数组。 您可以使用以下方法插入多个新Outbox模型：

Outbox::insert($request->input('messages'));

或

foreach($request->input('messages') as $message){
    Outbox::create($message);
}
相关文章：