在vue.js中从axios获取响应数据 [英] Get response data from axios in vue.js

问题描述

我正尝试从REST API获取响应数据，并将其显示在我的vue.js应用程序中，如下所示:

I am trying to get the response data from my REST API and to display it in my vue.js application as follows:

var database = new Vue({
    el: '#database',
    data: {
        databaseConfiguration: {
            type: '',
            url: '',
            port: '',
            username: '',
            password: ''
        },
        errors: []
    },
    created: function () {
        axios.get('/config/database')
            .then(function (response) {
                this.databaseConfiguration = response.data;
                console.log(response.data);
            })
            .catch(function (error) {
                this.errors.push(error);
                console.log(error);
            })
    }
}
)

如果我对其进行调试，则会看到从REST API正确获取了响应.但不幸的是，数据没有显示在html页面上.html代码如下所示:

If I debug it, I see that the response is correctly fetched from the REST API. But unfortunately the data is not displayed on the html page. The html code looks as follows:

<div id="database" class="panel panel-default panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Database Configuration</h3>
    </div>
    <div class="panel-body">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputType" class="col-sm-2 control-label">Type</label>
                <div class="col-sm-10">
                    <input type="text" v-model="databaseConfiguration.type" class="form-control" id="inputType"
                           placeholder="Database type">
                </div>
            </div>
            <div class="form-group">
                <label for="inputUrl" class="col-sm-2 control-label">Url</label>
                <div class="col-sm-10">
                    <input type="text" v-model="databaseConfiguration.url" class="form-control" id="inputUrl"
                           placeholder="Url">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPort" class="col-sm-2 control-label">Port</label>
                <div class="col-sm-10">
                    <input type="number" v-model="databaseConfiguration.port" class="form-control" id="inputPort"
                           placeholder="Port">
                </div>
            </div>
            <div class="form-group">
                <label for="inputUsername" class="col-sm-2 control-label">Username</label>
                <div class="col-sm-10">
                    <input type="text" v-model="databaseConfiguration.username" class="form-control"
                           id="inputUsername" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" v-model="databaseConfiguration.password" class="form-control"
                           id="inputPassword" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

所有代码都可以在此处找到.

All the code can be found here.

推荐答案

您的 this 指向回调中的错误对象.尝试使用箭头函数，闭包或 bind .

Your this is pointing to the wrong object in your callbacks. Try using an arrow function, a closure, or bind.

这里是使用箭头功能的示例.

Here is an example using an arrow function.

axios.get('/config/database')
        .then(response => {
            this.databaseConfiguration = response.data;
            console.log(response.data);
        })
        .catch(error =>{
            this.errors.push(error);
            console.log(error);
        })

请参见如何访问正确的 this 在回调中.

See How to access the correct this inside a callback.

这篇关于在vue.js中从axios获取响应数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！