[SOLVED] Access pageinit functions into methods

Questions
1

Hi @nolimits4web,

I have been trying one functionality to implement for which I want call a function created on page init from methods defined on same page.

Example code is given below:

<script>
    return {
        methods: {
            applyFilter: function () {
                var self = this;
                self.newVal = "hello";
                testFn(self.newVal);
            }
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                var app = self.$app;
                var $$ = self.$$;

                function testFn(value) {
                    console.log(value);
                }

            }
        }
    }
</script>

I am trying to call testFn function from method applyFilter but I am getting error testFn is not defined.

It will be very helpful if you can reply quickly, because I am stuck because of this.

2

I think you have to add your testFn to the methods object, and then call it using this.testFn(…):

<script>
return {
    methods: {
       testFn: function(value) {
            console.log(value);
        },
        applyFilter: function () {
            var self = this;
            self.newVal = "hello";
            this.testFn(self.newVal);
        }
    },
    on: {
        pageInit: function (e, page) {
            var self = this;
            var app = self.$app;
            var $$ = self.$$;
        }
    }
}
</script>
1 Like
3

Hi @Tim,

Thank you for your response.
What you suggested is doable and I have done that before but I want to call the function defined inside of page init from a method.

4

This is not possible as this is how JavaScript works. Then you should still assign it to component context:

pageInit() {
  ...
  self.testFn = function (value) {
    ...
  }
}

Then you can call it as this.testFn in other methods

1 Like
5

Hi @nolimits4web,

Thank you for your response this helped me achieve what I had to, but I have little limitation which I am not able to clarify, please do suggest on below mentioned code.

 <script>
return {
    methods: {
       testCode: function(value) {
            console.log(value);
            console.log(self.initialIndex);         <--- (this shows undefined)
            self.initialIndex = self.initialIndex + 1;
        },
        applyFilter: function () {
            var self = this;
            self.newVal = "hello";
            this.testFn(self.newVal);
        }
    },
    on: {
        pageInit: function (e, page) {
            var self = this;
            var app = self.$app;
            var $$ = self.$$;
            self.initialIndex = 1;
            self.orderBy = '';
            self.testCode(self.orderBy);
        }
    }
}
</script>

is there any way that I can access self variables defined on page init and use them or update them in defined methods and again can use the updated value in any other defined method?

I might be asking dumb question but I am not able to figure it out. Please do suggest or any example will be helpful.

6

Your forgot var self = this in the beginning of that method

1 Like
7

Thank you so much, I was sure I am doing a dumb mistake.