Question

所以我正在使用Laravel 5.3而我正在尝试创建一个DataTable，我试图创建一个从后端获取数据的方法，并且我试图尝试组件准备好后立即调用它。

我发现ready（）挂钩现在已经死了并且用mounted（）替换了，因此我的模板看起来像这样。

<template>
..Simple Bootstrap table...
</template>

<script>
    export default {
        data: () => {
            return {
                searchQuery: "",
                columns: ['ID', 'Name', 'Campaign', 'Method', 'Limit Per Connection', 'Limit Per Day', 'Active', 'Last Ran'],
                lastId: 0,
                rowsPerPage: 10,
                gridData: [
                    { id: 1, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"},
                    { id: 2, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"},
                    { id: 3, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"},
                    { id: 4, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"},
                    { id: 5, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"},
                    { id: 6, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"},
                    { id: 7, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"}
                ]
            }
        },
        methods: {
            /**
             * Fetch JSON data for crons from the Backend
             *
             * @param lastId - The last ID in the current data
             */
            fetchData: (lastId) => {
                Vue.http.get('/data').success((response) => {

                    console.log(response);

                }).error((response) => {

                    console.error(response);

                })
            },
        },
        mounted: () => {
            // When the Component is ready fetch the JSON from the Server Backend
            this.fetchData(0);
        },
    }
</script>

<style>...My Css...</style>

Mounted方法会触发，但是this$1.fetchData is not defined知道我做错了什么？ Mounted挂钩是否无法访问我的方法？

Answer 1

mounted的语法应如下所示：

mounted () {
    // When the Component is ready fetch the JSON from the Server Backend
    this.fetchData(0);
}

Don't use arrow function for lifecycle hooks，箭头函数使用由其上下文确定的词汇this，vue无法为我们绑定它。

在挂钩，Vue JS中未定义的方法

1 个答案: