Question

我是Laravel的VueJs新手。我有一个名为Event的组件，其中一个'read more ...'链接会触发一个函数，该函数从数据库中获取事件信息并将其存储在具有相同组件的变量中。

以下是我的组件的代码：

<template>
<div class="container">
<div class="panel panel-default">
    <div class="panel-heading">
        <h5>
            Title: {{ event.event_name }}
            <span class="pull-right">
                @click=getEventInfo(event.id)>Read more ...</a></span>
        </h5>
        <h5>publised by: {{ event.user.name }}
             <span class="pull-right" v-text="timeFromNow(event.created_at)"></span>
        </h5>

    </div>

    <div class="panel-body">
        <p>{{ event.event_detail }}</p>
        </div>
    <div class="panel-footer">
            <p>
            <span>Event for: {{ event.event_to_whom }}</span>
            <span>When: {{  dayOfDate(event.event_when_date) }} {{  event.event_when_date }} at {{event.event_when_time}}</span>
            </p>
    </div>
</div>
</div>
</template>


<script>
import moment from 'moment';
export default {
    name: 'app-event',
    props:['event'],
    data() {
        return {
           eventInfo: {}
        }
    },
    methods: {
        timeFromNow(tmp) {
            return moment(tmp).fromNow();
        },

        dayOfDate(d) {
            let dt = moment(d, "YYYY-MM-DD");
            return dt.format('dddd');
        },
        //event.id
        getEventInfo(id){  

            let url = 'events/' + id;

            axios.get(url)
            .then((response) => {
            console.log(response.data); //returns data
            this.eventInfo = response.data;
            console.log(this.eventInfo);//returns data
          });

          console.log(this.eventInfo); //returns nothing
        }
    }
}
</script>

问题是当我点击'read more ...'链接axios返回一个我可以使用console.log（response.data）检查的响应。 Hovever当我在axios闭包之外的console.log（this.eventInfo）时，它返回和ampty对象。

我做错了吗？对不起，如果问题太基础了。

由于 L.B

Answer 1

您正在打印属性，然后才能为其分配值。

以下代码可以解决任何错误

import moment from 'moment';
export default {
    name: 'app-event',
    props:['event'],
    data() {
        return {
           eventInfo: {}
        }
    },
    methods: {
        timeFromNow(tmp) {
            return moment(tmp).fromNow();
        },

    dayOfDate(d) {
        let dt = moment(d, "YYYY-MM-DD");
        return dt.format('dddd');
    },
    //event.id
    getEventInfo(id){  
        let url = 'events/' + id;
        axios.get(url)
        .then((response) => this.handleResponse(response.data));
    },
    handleResponse(eventInfo) {
        console.log(eventInfo);
        // do something with the eventInfo...
    }
}

Answer 2

您的axios调用是异步的，因此您的外部console.log将在返回响应之前得到处理。

只需将您的代码保存在.then((response) => { // here i proceed the read more }

中

VueJs组件：无法将axios响应归因于组件变量

2 个答案: