我是 vue 的新手，我似乎可以得到对此的回应。Vue 中的 $http.get('url', function(data))

Question

我使用的是 laravel(5.2) 和 vue 的新手。我正在尝试将数据从数据库传递到视图。看来我的正确路线没问题，我得到了一些 json 数据响应，但我无法将数据记录到控制台或我的视图。请让我知道我做错了什么。

这是我存储在 .vue 文件中的 ShowEvent 组件

<template>

<div class="events_list">
    <h1> My Events </h1>

    <ul class="list-group">

        <li class="list-group-item" v-for="event in list">
            {{ event.body}}

        </li>

    </ul>
</div>

</template>

<script>
export default {


    data: function () {
        return {


            list: []

        };

    },

    created: function(){

        this.fetchEventsList();



    },

    methods: {
        fetchEventsList: function () {
            this.$http.get('/api/events', function(data){

                console.log(data);

            });

        },

        delete: function(event) {
            this.list.$remove(event);

        }
    }


}

这是我的 main.js 文件

import Vue from 'vue';
import VueResource from 'vue-resource';
Vue.use(VueResource);
import ShowEvent from  './components/ShowEvent.vue';



new Vue({

el: '#app',

components: {ShowEvent: ShowEvent},

ready(){


        alert("Ready to go!, Show Events");


}

});

这是视图文件

<!DOCTYPE html>
<html>

<head>
<title>Eventer</title>
</head>


<body>

<div id="app" class="container">

<show-event>

</show-event>

</div>


<script src="/js/main.js"></script>

</body>

</html>

Answer 1

将您的呼叫替换为：

this.$http.get('/api/events').then((response) => {
  console.log(response.data) 
}, (error) => {
  console.log(error)
})

Check the docs了解更多信息

我是 vue 的新手，我似乎可以得到对此的回应。Vue 中的 $http.get('url', function(data))

I am new to vue and I can seem to get a response for this.$http.get('url', function(data)) in Vue

vue.js

laravel-5.2

vue-resource