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

Posted 2023-02-16

【中文标题】在 Laravel 5.1 和 Vue JS 中保存多个数据动态表单

【英文标题】：Saving multiple data dynamic form in Laravel 5.1 and Vue JS

【发布时间】：2016-04-25 19:36:46

【问题描述】：

我必须添加/发布数据表单。但随着用户“点击”按钮，表单会动态增加。我已经浏览过它，我得到了一些答案，比如使用 $request->all() 从输入表单中获取所有数据。

然后我的问题是，我的应用程序使用 VueJS 作为前端。 VueJS 脚本上是否有任何配置可以发布该动态表单中的所有数据？？

将动态增加的我的 Blade 模板：

<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。即使我使用 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++;

对于第二行和下一行，未在输入元素上添加名称属性。 谢谢

【参考方案1】：

您正在以一种非常令人困惑的方式混合刀片、jquery 和 vue。看看这个用 Vue 完成所有这些的 JS fiddle：

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

【讨论】：

太棒了！现在我如何通过单个查询或不使用循环来保存这些数据？？

需要查看您的控制器代码。您是否为这些消息和数据库表创建了模型？我认为使用循环将它们保存到数据库就可以了

是的，我有一个模型。它称为“发件箱”，仅列 ID（受保护的自动增量），DestinationNumber，TextDecoded，不幸的是我只是尝试使用 dd() 函数转储它：D 尝试使用 foreach 但不确定如何从 JSON 对象中捕获值。我的意思是使用这个 $request->get('this sud be values')。您可以更新示例的答案吗？如果使用循环没有问题