element ui slider滑块赋值无效

Question

<el-slider v-model="volume"></el-slider>

var app = new Vue({
    el: '#app',
    data: {
        volume: 50,
    },
    created: function() {
        this.getVolume();
    },
    methods: {
        getVolume: function() {
            axios.get(url).then(function(response) {
                this.volume = response.data.volume;
                console.log(this.volume) // 这里能够打印出来
            }).catch(function(err) {
                console.log(err);
            });
        }
    }
})

console面板能够打印出数值，说明this.volumey已经被赋值了，但是html里面的slider插件一直显示初始化的50，并没有将获取到的值重新加载，希望有人能解惑，谢谢

Answer 1

这个this不是vue实例吧，这样写试试。

var app = new Vue({
    el: '#app',
    data: {
        volume: 50,
    },
    created: function() {
        this.getVolume();
    },
    methods: {
        getVolume: function() {
            const that = this;
            axios.get(url).then(function(response) {
                that.volume = response.data.volume;
                console.log(that.volume) // 这里能够打印出来
            }).catch(function(err) {
                console.log(err);
            });
        }
    }
})