programing

Vue를 사용하여 Laravel 경로로 데이터를 전송하기 위해 Vue.http.post 데이터를 설정하려면 어떻게 해야 합니까?

copysource 2022. 8. 10. 21:06
반응형

Vue를 사용하여 Laravel 경로로 데이터를 전송하기 위해 Vue.http.post 데이터를 설정하려면 어떻게 해야 합니까?

Vue.js를 사용하여 Larabel 백엔드로 포스트 요청을 보내고 싶습니다.별도의 도서관 없이 만들고 싶어요.나는 순수한 Vue.http.get 요청을 하고 있는데, 그것은 매우 효과적입니다.Laravel 경로 테스트와 컨트롤러가 데이터를 반환하기 위해 템플릿에 Ajax 요청을 작성했습니다.이것도 정상적으로 동작하며 올바른 데이터를 반환하고 있습니다.단, Vue를 사용하는 경우 Vue.http.post (My/Controller/Route', data)를 통해 컨트롤러에 포스트 데이터가 전송되지 않습니다.

My Vue.js 컴포넌트:

<template>
    <div class="opt-pro" v-for="r in profissionais">
        <input :id="r.id" type="checkbox" :value="r.id" v-model="checkedNames" v-on:change="filterResources()"/><label>  {{ r.title }}</label>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dados: {view: 'dia', pro: [], data: 'Setembro 11, 2017'},
                meus_recursos: [],
                profissionais: [],
                checkedNames: []
            }
        },
        methods:{
            getResources: function() {
                var self = this;
                return Vue.http.get('/admin/getResources').then((response) => {
                _.forEach(response.data.resources,function(item){
                    self.meus_recursos.push(item);
                    self.profissionais.push(item);
                });
                console.log(self.meus_recursos);
            });
        },
        filterResources: function(){
            this.dados.pro = this.checkedNames; // returned by another Vue piece of code - console.log() returns the correct data for this var
            return Vue.http.post('/admin/getAgendamentosPorProfissional', this.dados).then(
                (response) => {
                    console.log(response.body);
                }, 
                (response) => {
                    console.log("Error");
                    console.log(response);
                    console.log(response.body);
                });
        }
    }

내 Laravel 컨트롤러 기능:

public function getAgendamentosPorProfissional(){
       // $view = $_POST['view'];
      // $pro = $_POST['pro'];
      // $data = $_POST['data'];
      $post = $_POST;

      return response()->json(array('post' => $post),200);
}

콘솔에 다음과 같이 표시됩니다.
{post: Array(0)}

내 jQuery AJAX 함수:

$.ajax({
      type:'POST',
      url:'/admin/getAgendamentosPorProfissional',
      data:  {"data": data, "view": view, "pro": [pro],"_token": "{{ csrf_token() }}"},
      success:function(data){
        console.log("AJAX - /admin/getAgendamentosPorProfissional");
        console.log(data);
      }
    });

콘솔에 다음과 같이 표시됩니다.

post:
    data: "Setembro 11, 2017",
    pro:["75"]
    view:"dia"
    _token:"6LviacS2KoBqjXxTsFhnTtAQePuEzZ49OMwqBmbM"

요청하신 url에서 larabel로 올바른 데이터를 반환하기 때문에 CORS 문제는 아닙니다.어떻게 하면 고칠 수 있을까요?

토큰은 larabel/resources/assets/js/bootstrap.js 파일로 설정됩니다.

window.Vue = require('vue');
require('vue-resource');

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
    next();
});

언급URL : https://stackoverflow.com/questions/46186598/how-to-set-vue-http-post-data-using-vue-to-send-data-to-laravel-route

반응형