vue.js BeforeRouteEnter未将数据加载到变量

jxct1oxe 于 2023-10-23 发布在 Vue.js

关注(0)|答案(2)|浏览(137)

我已经设置了一个正确发送数据的Web API，但是，我的vuejs应用程序有一个数据表组件，我使用BeforeRouteEnter钩子使用Axios进行API调用，但是响应中的数据没有保存到我的数据变量中。
是这样的数据变量，如我的数组称为queryResult没有加载，直到我的得到请求后，因此它不能保存到它的原因？我还试图调用Axios代码和变量update作为一个方法，但由于某种原因，它无法识别方法queryDB，因此它再次让我相信我的时间已经关闭。
代码如下：

<template id="dashboard">
    <div>
        <v-card>
            <v-card-title>
                <v-text-field v-model="search"
                              append-icon="mdi-magnify"
                              label="Search"
                              single-line
                              hide-details></v-text-field>
            </v-card-title>
            <v-data-table :headers="headers"
                          :items="queryResult"
                          :search="search"></v-data-table>
        </v-card>
    </div>
</template>

const dashboard = Vue.component('dashboard',
        {
        template: '#dashboard',
            data() {
                return {
                    userID: 'SB',
                    password: 'Yellow',
                    search: '',
                    headers: [
                        { text: 'ID', align: 'start', filterable: true, value: 'ID'},
                        { text: 'USERNAME', value: 'USERNAME' },
                        { text: 'FIRST_NAME', value: 'FIRST_NAME' },
                        { text: 'LAST_NAME', value: 'LAST_NAME' },
                    ],
                    queryResult: [],
                }
            },
            beforeRouteEnter(to, from, next) {
                axios.get(window.location.origin + '/home/DapperDatatableLoad', {
                    params: {}
                })
                    .then(function (response) {
                        queryResult = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                next()
            },
            methods: {
                queryDB: function () {
                    axios.get(window.location.origin + '/home/DapperDatatableLoad', {
                        params: {
                            
                        }
                    })
                        .then(function (response) {
                            queryResult = response.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        });

vue.js

来源：https://stackoverflow.com/questions/67029773/beforerouteenter-not-loading-data-to-variable

2条答案

按热度按时间

atmip9wb1#

我认为你的意思是路由在你的数据出现之前就加载了。
这是有意义的，因为axios.get是异步的。这意味着当axios.get从服务器请求数据时，主线程仍在执行代码。然后当axios.get接收到数据时，它会触发.then回调。
在您的例子中，下一个命令是next()，它告诉路由器继续前进并继续路由。这意味着当axios.get正在检索数据时，您已经调用了next()。
如果你想等待axios先获取数据，你需要将next()移动到回调函数中。

beforeRouteEnter(to, from, next) {
    axios.get(window.location.origin + '/home/DapperDatatableLoad', {
        params: {}
    })
        .then(function (response) {
            next();
            this.queryResult = response.data; //Notice that `queryResult` is referred to with `this.`
        })
        .catch(function (error) {
            next();
            console.log(error);
        });
},

另一种解决方案是改用await语法

async beforeRouteEnter(to, from, next) {
    try{
        let response = await axios.get(window.location.origin + '/home/DapperDatatableLoad', {
            params: {}
        });
    } catch (error){
        console.log(error);
    }
    this.queryResult = response.data;       

    next();
},

赞(0）回复(0）举报 2023-10-23

u4vypkhs2#

您无法访问beforeRouteEnter中的dataReact变量，但可以在next函数中更改它们。你的代码：

const dashboard = Vue.component('dashboard',
        {
        template: '#dashboard',
            data() {
                return {
                    userID: 'SB',
                    password: 'Yellow',
                    search: '',
                    headers: [
                        { text: 'ID', align: 'start', filterable: true, value: 'ID'},
                        { text: 'USERNAME', value: 'USERNAME' },
                        { text: 'FIRST_NAME', value: 'FIRST_NAME' },
                        { text: 'LAST_NAME', value: 'LAST_NAME' },
                    ],
                    queryResult: [],
                }
            },
            beforeRouteEnter(to, from, next) {
                let data = null
                axios.get(window.location.origin + '/home/DapperDatatableLoad', {
                    params: {}
                })
                    .then(function (response) {
                        data = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                next((vm)=>{
                   vm.queryResult = data
                })
            },
            methods: {
                queryDB: function () {
                    axios.get(window.location.origin + '/home/DapperDatatableLoad', {
                        params: {
                            
                        }
                    })
                        .then(function (response) {
                            queryResult = response.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        });

赞(0）回复(0）举报 2023-10-23

我来回答

vue.js BeforeRouteEnter未将数据加载到变量

2条答案

相关问题

热门标签

最新问答