Question

我正在学习有关laravel的vuejs。我正在研究简单的电话簿项目。现在，我正在尝试使用lastvel中的bootstrap模式和vuejs来保存数据。我试着像波纹管那样做。但是，它正在返回所有数据对象。在哪里我做错了。请有人帮忙解决这个问题 -

Add.vue -

<template>
<div>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">New <i class="fa fa-plus"></i></button>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <form method="POST" action="/phonebook">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">New Entry</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">

              <div class="form-group">
                <label for="name" class="col-form-label">Name:</label>
                <input type="text" class="form-control" placeholder="Name" v-model="list.name">
              </div>
              <div class="form-group">
                <label for="phone" class="col-form-label">Phone:</label>
                <input type="text" class="form-control" placeholder="+123456" v-model="list.phone">
              </div>
              <div class="form-group">
                <label for="email" class="col-form-label">Email:</label>
                <input type="text" class="form-control" placeholder="example@example.com" v-model="list.email">
              </div>

           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
             <button type="button" class="btn btn-primary" @click='save'>Save</button>
           </div>

        </div>
        </form>
      </div>
    </div>
</div></template>

而脚本是 -

<script>
export default{
    data(){
        return{
            list:{
                name:'',
                phone:'',
                email:''
            }
        }
    },

    methods:{
        save(){
            axios.post('/phonebook',this.$data.list).then((response)=> console.log(response))
              .catch((error) => console.log(error))
        }
    }
}</script>

Answer 1

从我在这里收集的东西看，你没有看到你在Laravel的路线是你没有为AJAX请求做好准备。您的路由必须检测请求是否为XHR并正确返回json或其他格式以及正确接收您的帖子数据。

我建议使用laravel内置的Api中间件，通过AJAX将数据发送到API路由。 https://laravel.com/docs/5.5/routing#basic-routing

在尝试保存请求的数据时，它会在laravel + vuejs + bootstrap中发布所有数据对象

1 个答案: