Can't access variable inside "then"

1

Inside a component, I try to access a variable, such as $app. But it fails.

<script>
export default {
    order: 0,
    methods: {
        openAlert: function () {
            var self = this;


            this.$options.order = 1 - this.$options.order;

            var $app = this.$app;
            var options = this.$options;

            $app.contentService.list($app.httpHelper, 1, options.order).then(function(response){
                console.log(response);

                console.log($app);
                // it fails here, Uncaught ReferenceError: $app is not defined
            })


        },
    },
}
</script>

I can access “response”, but i can’t access $app. However, I was able to access $app outside “then”.

You can judge me because it is a JS question. However, I am normally able to do it. When i isolate all my code in a blank page, and imitate all the objects, i can access $app. But, in the component, i am not. This is the weird part.

2

I figured out, another way.

    var $app = this.$app;
    var options = this.$options;

    $app.contentService.list($app.httpHelper, 1, options.order).then(function(response){
        return new Promise(function(resolve, reject){
          resolve(response);
        });
    }).then(function(response){
      console.log(response);
      console.log($app);
    });
3

try:

var app = this.$app: