用 Vue 向 Laravel 控制器发送数组数据

我被编码卡住了。 如何将数组数据发送到 Laravel 控制器? 通常我会用这个把数据绑定到一个表单上。 我应该使用表单还是有方法不用表单发送它们 ? 谢谢。

Vue 组件

<template>
    <form submit.prevent="submitData">
        <div class="jumbotron bg-dark col-md-10 offset-md-1">
                <div class="card card-body bg-dark" v-for="(user,index) in users" :key="index">
                        <h5>
                        <span class="badge badge-success mb-3 float-left">Data {{index+1}}</span>
                        <span style="cursor:pointer" class="float-right badge badge-danger mb-3" @click="deleteData(index)">X</span>
                        </h5>
                        <div class="row">
                            <div class="form-group col-md-3">
                                <label for="email" class="text-white">Username:</label>
                                <input type="text" class="form-control" id="username" v-model="user.username">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="pwd" class="text-white">Password:</label>
                                <input type="password" class="form-control" id="password" v-model="user.password">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="pwd" class="text-white">Phone Number:</label>
                                <input type="text" class="form-control" id="phone" v-model="user.phone">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="pwd" class="text-white">Email</label>
                                <input type="email" class="form-control" id="email" v-model="user.email">
                            </div>
                        </div>
                </div> 
             <br>
                <button class="btn btn-secondary float-right"  @click="addMoreData()" title="Click to add row"><span class="fa fa-plus-square"></span> &nbsp;Add More Data</button>
        </div>

        <div class="jumbotron bg-dark col-md-10 offset-md-1 ">
            <button class="btn btn-success col-md-6 offset-md-3 p-3" type="submit"><span class="fa fa-plus-square"></span> &nbsp;Export to Microsoft Excel</button>
        </div> 
    </form>           

脚本

<script>
export default {
    data(){
      return{  
            users: [{
                username:'',
                password:'',
                phone:'',
                email:''
            }]
      }
    },
    methods:{
        addMoreData(){
            this.users.push({
                username: '', 
                password: '' , 
                email: '',
                phone:''
                });
        },
        deleteData(index){
            this.users.splice(index,1)  
        },
        submitData(){

      }
    },
    mounted() {
        console.log('Component mounted.')
    }
}


EN From: Send array data to laravel controller with Vue

4 Comments

  1. 您可以将提交按钮放入 V-for 循环中 , 并通过一个索引来提交数据 , 这与您使用 deleteData 的方式完全相同。 从该索引中可以检索数组中的相应用户并提交。
  2. 我要立即提交所有的数据。 例如 , 如果用户添加 3 个额外的行数据 , 那么如果他们单击提交按钮 , 所有这些数据将被发送 @MuratK
  3. 你的代码看起来很好 , 只需要将数组发送到 Laravel 。 这里有一个例子 :

    submitData(){
      // Here we send the data to '/users/store' route, 
      // using POST method and 'this.users' array as data
      axios.post('/users/store', this.users)
        .then(function (response) {
          // If the request is successful, we can do whatever we want with the response here
          console.log(response);
        })
        .catch(function (error) {
          // If there's an error, treat it here
          console.log(error);
        });
    }
    

    仍然使用上述示例 , 在 UserController 中 , 您将收到这样的数据 :

    public function store(Request $request)
    {
        /*  
            $request->all() contains all the data you sent
            in this case, the users array, but you should always
            validate it before, using FormRequest, for example: 
            https://laravel.com/docs/5.8/validation#form-request-validation
        */
        User::create($request->all()); // Here we save all users to database
    
        // returning the data you sent before, just for testing.
        return response()->json([$request->all()]);
    }
    
    1. 获取此错误消息 :"SQLSTAT[23000]:完整性约束侵犯:1048列的"用户名"不能是空的(SQL:插入userusernamepasswordemailphone)值(?,???)"

More articles:

  • 捕捉查询数据库的所有路径并发送到控制器而不是视图
  • Laravel vue 显示更新字段的旧数据
  • Ajax 不会向控制器发送数据
  • 把数据发送到 Firebase 因为数组给了我错误
  • 从控制器向视图传递数据 , 返回控制器 , 返回视图
  • 从视图发送到 web api 控制器时 , 数据总是无效
  • Laravel 路线和控制器测试
  • android MVC : 向控制器发送消息
  • Laravel 控制器实例创建
  • 如何从非控制器方法的方法发送响应?
  • Laravel 控制器未接收复选框值
  • Laravel 会话数据的视图和控制器不同
  • 不确定数据的排序阵列
  • 从 db 获取数据 , 只保存数组中的名称 , 并使用 foreach 循环之外的数组 - Laravel
  • 格式化表以正确的列和行显示数据
  • Laravel : 控制器功能 , 删除数据
  • 向控制器发送 Ajax 数据?
  • 如何将带有 json 数据的自定义字符串发送到 asp.net mvc 控制器 ?
  • 如何将控制器中的数据库列查询与 Laravel 5.2 公共路径中的文件夹连接到我的 pd f 多下载中
  • 如何在 laravel 中解析表单数据请求
  • 为什么我的变量在控制器的构造函数中没有被设置 ?
  • Laravel 5.5 无需重新加载页面即可发送数据
  • 避免在运行时将反应性属性添加到 Vue 实例或其根元数据中 - 在数据选项中提前声明。
  • Laravel RESTful 控制器添加参数以创建
  • Laravel Routing / 控制器
  • 手动发送到 ASP.NET MVC 控制器
  • 从 ASP.NET MVC 控制器将 JSON 数据发送到另一个 URL
  • 如何使用 curl 发送多维阵列的 json 数据 ?
  • 使用 php 从 localhost 发送数据到 web 服务器
  • 富历表计划程序 - 外部拖放没有从 HTML 发送数据事件