javascript - Vue 从 axios 调用返回数据对象到 Controller

Question

我在 laravel 中使用 vue，并尝试获取一个 Controller 函数，我要返回数据，以便我可以在 vue 模板的 data() 部分中使用它。

我知道 Controller 函数返回我需要的内容，但我不太确定需要如何处理 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');

Controller

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
    ...
    };
}

完成后，一切就都准备好了。