laravel 中的 Vue.js 不使用 Ajax 返回 GET 请求答案

【问题标题】：Vue.js in laravel does not return GET request with Ajaxlaravel 中的 Vue.js 不使用 Ajax 返回 GET 请求
【发布时间】：2018-05-11 10:17:09
【问题描述】：

我正在尝试使用 Vue.js 创建一个 laravel 应用程序来调用控制器响应，我已经尝试单独使用 ajax 并且它可以工作，但是使用 Vue GET 方法似乎不起作用，也没有错误代码供我调试。

这是我的 Vue.js

<template>
<div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item"  v-for="unregboard in unregboards" :key="unregboard.boardId"> 
            {{ unregboard.boardName }}  
        </li>
    </ul>
</div>
</template>

<script>
export default {

    data(){
        return{
            unregboards:[]
        }
    } , created: function(){
        this.fetchUnreg()
    }, methods:{
        fetchUnreg: function () {
            console.log("test"); //this works
            this.$http.get('/registerlist', function(resp){
                this.unregboards = resp.unRegBoards;
                console.log(resp.unRegBoards);
                console.log('test'); // This doesn't
            }).bind(this);
        }
    } 

}
</script>

<style>

</style>

更新

我已经修复了一些东西和代码，我寄予厚望，因为与之前我能够记录我的 json 响应不同，请检查下面的代码：

<template>
    <div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item"  v-for="unregboard in unregboards" :key="unregboard.boardId"> 
                {{ unregboard["boardName"] }}  
            </li>

        </ul>
    </div>
</template>

<script>
export default {

    data(){
        return{
            unregboards:[]
        }
    } , created: function(){
        this.fetchUnreg()
    }, methods:{
        fetchUnreg: function () {
            console.log("test");
            $.get('/registerlist', function(resp){
                this.unregboards = resp.unRegBoards;
                console.log(resp.unRegBoards);
            });
        }
    } 

}
</script>

<style>

</style>

问题出在模板上，我没有在“unregboards”Vue.js 的 For 循环中返回任何内容

其他信息 这是正在返回的 json 文件：

{
   "regBoards":[
      {
         "boardName":"Client 1",
         "boardId":"594a0ec09ad35eba4434142r",
         "organization":"Dream Inc."
      },
      {
         "boardName":"Welcome Board",
         "boardId":"58d311eeace6df3821107648",
         "organization":null
      }
   ],
   "unRegBoards":[
      {
         "boardName":"Client 2",
         "boardId":"5935fc808823fdbe2875d63g",
         "organization":"Dream Inc."
      },
      {
         "boardName":"Client 3",
         "boardId":"59190bf0b27a6f308820rh5u",
         "organization":"Dream Inc."
      },
      {
         "boardName":"Client 4",
         "boardId":"58a5006e9985e088628f634g",
         "organization":"Dream Inc."
      },

   ]
}

【问题讨论】：

你在使用 webpack/browserify 吗？
stackoverflow.com/questions/42387414/…
不一样，我已经安装了vue-resources，正如我所说的它不会返回任何错误，正如您在我附加的代码中看到的那样我已经尝试了两个console.log ，另一个有效，另一个无效。
这样试试 this.$http.get('/registerlist').then( function (response) { }, function (error) { });
我已经试过了还是不行

标签： vue.js laravel-5.3 vue-resource

【解决方案1】：

这样试试，

this.$http.get('/registerlist').then(
    response => {
        this.unregboards = response.data
    }
);

【讨论】：

当你记录 response.body 时会发生什么？
什么都没有发生
不要使用函数语法，而是使用箭头函数并尝试我更新了代码

【解决方案2】：

根据vue-resource documentation，没有第二个回调参数传递给.get()方法，只有options。

假设响应正文是 JSON，您还应该使用 .json() 方法解析响应。现在，您正在将 undefined 分配给您的 data 属性。

fetchUnreg: function () {
  this.$http.get('/registerlist').then(resp => resp.json()).then(data => {
    this.unregboards = data
    console.log(this.unRegBoards)
    console.log('test')
  })
}

【讨论】：