Laravel VueJS Axios 将数组发送到控制器

Posted

技术标签:

【中文标题】Laravel VueJS Axios 将数组发送到控制器【英文标题】:Laravel VueJS Axios send array to controller 【发布时间】:2018-01-04 13:01:04 【问题描述】:

我有一个使用 VueJS 2.0 作为前端的 laravel 5.4 应用程序。

我试图在页面上填充之后将访问者数组发布到控制器,但是当我从控制器返回数组时,数据不存在。

我一辈子都看不到我做错了什么?有趣的是,如果我发送两个访问者,我会从控制器返回两个空数组,因此访问者的数量正在工作,它只是没有捕获数据。

我的 vue 实例。

  <script>
    new Vue(

    el: '#app',

    data: 
        visitors: [],
        visitor: [],
    ,

    methods: 
        addVisitor() 
            this.visitors.push(this.visitor);
            this.visitor = [];
        ,

        storeVisit()
        
          axios(
            method: 'post',
            url: '/visit/new',
            data: 
              visitors: this.visitors
            
          );
        
    ,

);
  </script>

我的 html 页面

<p>Visitors</p>
    <div class="columns">
      <div class="column">
          <input class="input" placeholder="First Name" v-model="visitor.first">
      </div>
      <div class="column">
          <input class="input" placeholder="Last Name" v-model="visitor.last">
      </div>
      <div class="column">
          <input class="input" placeholder="Company" v-model="visitor.company">
      </div>
      <div class="column">
          <input class="input" placeholder="Email" v-model="visitor.email">
      </div>
      <div class="column">
          <button class="button is-primary" @click="addVisitor()">Add</button>
      </div>
    </div>

然后我有一个按钮来操作 storeVisit() 方法。

<button class="button is-primary" @click="storeVisit">Save Visit</button>

我的控制器正在等待发布请求

public function store(Request $request)
    
        return $request->visitors;
    

我的回应

"访客":[[],[]]

【问题讨论】:

【参考方案1】:

visitor 应该是一个对象,而不是一个数组

data: 
    visitors: [],
    visitor: , // <- object here
,

addVisitor() 
    this.visitors.push(this.visitor);
    this.visitor = ; // <- reset to an empty object
,

【讨论】:

以上是关于Laravel VueJS Axios 将数组发送到控制器的主要内容,如果未能解决你的问题,请参考以下文章

使用 axios vuejs 和 laravel 验证表单

从Vue js到Laravel的axios.post数组,在我的请求中只得到[object Object]

Axios、Laravel 和 VueJS 中的删除方法

laravel vuejs/axios put request Formdata 为空

Vuejs Axios POST 请求从 Laravel 后端获取 HTTP422 错误

使用 FormData Javascript 发送布尔值 - Vuejs + Laravel 应用程序