Vue 从 axios 调用返回数据对象到控制器

Question

我在 laravel 中使用 vue 并试图获得一个控制器函数，我正在使用该函数返回数据，以便我可以在data()vue 模板的部分中使用它。

我知道控制器函数返回我需要的东西，但我不太确定我需要如何处理 axios 调用中的返回/响应，以便开始将数据放入 vue 中的 data() 函数中

Blade/Vue 模板

import moment from 'moment'

export default {

    name: 'calendar',

    data () {

        return {

            events: [

                {

                    title: 'test',

                    allDay: true,

                    start: '2019-08-17',

                },

            ],

            config: {

                defaultView: 'month',

                eventRender: function(event, element) {

                    console.log(event)

                }

            },

        }

    },

    created() {

        this.fetchTasks();

    },

    methods: {

      fetchTasks() {

        axios.get('/landing/tasks' )

            .then((response) => {

                // handle success

                this.assetOptions = response.data;

            })

            .catch(function (error) {

                // handle error

                console.log(error);

            })

            .finally(function () {

        });

    }

}

}

路线

Route::get('/landing/tasks', 'landingController@getTasks')

    ->name('landing/tasks');

控制器

public function getTasks()

{

    $getTask = Task::getTaskForLanding();

    $result = array();

    foreach($getTask as $id => $task){

        $result[$task->taskt_id][] = $task;

    }

}

Answer 1

如果您确定 Controller 返回您需要的内容，那么您唯一缺少的是assetOptions. 为了以后能够分配response.data给assetOptions，您必须先在data函数中声明它。data() {    return {    ...    assetOptions = []; // assuming you are expecting an array    ...    };}一旦完成，你就准备好了。