laravel 中的 Vue.js 没有 return GET 请求 Ajax

Question

我正在尝试创建一个带有 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 循环

上没有 return 任何东西

附加信息 这是正在 return 编辑的 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."
      },

   ]
}

Answer 1

这样试试，

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

Answer 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')
  })
}

laravel 中的 Vue.js 没有 return GET 请求 Ajax

Vue.js in laravel does not return GET request with Ajax

vue.js

vue-resource

laravel-5.3