VueJS programatically trigger update on watched variable










1















Suppose I have a watcher that is watching an array mylist



watch 
mylist:function()
//Code




How can I programatically trigger an update on the variable and run the code (if the variable is unchanged)? How can I trigger an update if the watched variable is a nested object/array or a simple string?










share|improve this question

















  • 1





    Please provide some details about why you want to do it this way, maybe there is a better way to do it.

    – Amresh Venugopal
    Apr 18 '17 at 9:20















1















Suppose I have a watcher that is watching an array mylist



watch 
mylist:function()
//Code




How can I programatically trigger an update on the variable and run the code (if the variable is unchanged)? How can I trigger an update if the watched variable is a nested object/array or a simple string?










share|improve this question

















  • 1





    Please provide some details about why you want to do it this way, maybe there is a better way to do it.

    – Amresh Venugopal
    Apr 18 '17 at 9:20













1












1








1








Suppose I have a watcher that is watching an array mylist



watch 
mylist:function()
//Code




How can I programatically trigger an update on the variable and run the code (if the variable is unchanged)? How can I trigger an update if the watched variable is a nested object/array or a simple string?










share|improve this question














Suppose I have a watcher that is watching an array mylist



watch 
mylist:function()
//Code




How can I programatically trigger an update on the variable and run the code (if the variable is unchanged)? How can I trigger an update if the watched variable is a nested object/array or a simple string?







vue.js






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Apr 18 '17 at 9:08









user1506145user1506145

2,70753162




2,70753162







  • 1





    Please provide some details about why you want to do it this way, maybe there is a better way to do it.

    – Amresh Venugopal
    Apr 18 '17 at 9:20












  • 1





    Please provide some details about why you want to do it this way, maybe there is a better way to do it.

    – Amresh Venugopal
    Apr 18 '17 at 9:20







1




1





Please provide some details about why you want to do it this way, maybe there is a better way to do it.

– Amresh Venugopal
Apr 18 '17 at 9:20





Please provide some details about why you want to do it this way, maybe there is a better way to do it.

– Amresh Venugopal
Apr 18 '17 at 9:20












3 Answers
3






active

oldest

votes


















3














Since you didn't provide any description regarding the actual use-case, the best you can probably do is to extract a method that is called in call this method manually.



data: function() 
return myList:
,

watch:
myList: this.handleListChange
,

methods:
handleListChange: function(a, b)
// .. do whatever you want to do in the watch method




To trigger the "watch" method you can now simply call your handleListChange method manually.






share|improve this answer






























    0














    There are 2 questions:




    How can I programatically trigger an update on the variable and run the code if the variable is unchanged?




    You can hack it this way:



    this._watchers.find(w => w.expression === "mylist").cb(this.mylist);


    However, it's not part of the official Vue API. The _watchers list is rather an implementation detail. It may change in the future without any notice.





    How can I trigger an update if the watched variable is a nested object/array?




    Use a deep watcher:



    watch: 
    mylist:
    handler: function(val)
    // Code
    ,
    deep: true





    Working example: https://jsfiddle.net/LukaszWiktor/zjagahq2/






    share|improve this answer






























      0














      Here is how i did it

      Frank was on to something, i just couldn't access the "this" context like suggested

      so all had to do was pass all the args to the method.



      watch: 
      myList: (...args) this.handleListChange(...args) ,






      share|improve this answer






















        Your Answer






        StackExchange.ifUsing("editor", function ()
        StackExchange.using("externalEditor", function ()
        StackExchange.using("snippets", function ()
        StackExchange.snippets.init();
        );
        );
        , "code-snippets");

        StackExchange.ready(function()
        var channelOptions =
        tags: "".split(" "),
        id: "1"
        ;
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function()
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled)
        StackExchange.using("snippets", function()
        createEditor();
        );

        else
        createEditor();

        );

        function createEditor()
        StackExchange.prepareEditor(
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: true,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: 10,
        bindNavPrevention: true,
        postfix: "",
        imageUploader:
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        ,
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        );



        );













        draft saved

        draft discarded


















        StackExchange.ready(
        function ()
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f43468022%2fvuejs-programatically-trigger-update-on-watched-variable%23new-answer', 'question_page');

        );

        Post as a guest















        Required, but never shown

























        3 Answers
        3






        active

        oldest

        votes








        3 Answers
        3






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        3














        Since you didn't provide any description regarding the actual use-case, the best you can probably do is to extract a method that is called in call this method manually.



        data: function() 
        return myList:
        ,

        watch:
        myList: this.handleListChange
        ,

        methods:
        handleListChange: function(a, b)
        // .. do whatever you want to do in the watch method




        To trigger the "watch" method you can now simply call your handleListChange method manually.






        share|improve this answer



























          3














          Since you didn't provide any description regarding the actual use-case, the best you can probably do is to extract a method that is called in call this method manually.



          data: function() 
          return myList:
          ,

          watch:
          myList: this.handleListChange
          ,

          methods:
          handleListChange: function(a, b)
          // .. do whatever you want to do in the watch method




          To trigger the "watch" method you can now simply call your handleListChange method manually.






          share|improve this answer

























            3












            3








            3







            Since you didn't provide any description regarding the actual use-case, the best you can probably do is to extract a method that is called in call this method manually.



            data: function() 
            return myList:
            ,

            watch:
            myList: this.handleListChange
            ,

            methods:
            handleListChange: function(a, b)
            // .. do whatever you want to do in the watch method




            To trigger the "watch" method you can now simply call your handleListChange method manually.






            share|improve this answer













            Since you didn't provide any description regarding the actual use-case, the best you can probably do is to extract a method that is called in call this method manually.



            data: function() 
            return myList:
            ,

            watch:
            myList: this.handleListChange
            ,

            methods:
            handleListChange: function(a, b)
            // .. do whatever you want to do in the watch method




            To trigger the "watch" method you can now simply call your handleListChange method manually.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Apr 18 '17 at 10:10









            Frank ProvostFrank Provost

            3,83911537




            3,83911537























                0














                There are 2 questions:




                How can I programatically trigger an update on the variable and run the code if the variable is unchanged?




                You can hack it this way:



                this._watchers.find(w => w.expression === "mylist").cb(this.mylist);


                However, it's not part of the official Vue API. The _watchers list is rather an implementation detail. It may change in the future without any notice.





                How can I trigger an update if the watched variable is a nested object/array?




                Use a deep watcher:



                watch: 
                mylist:
                handler: function(val)
                // Code
                ,
                deep: true





                Working example: https://jsfiddle.net/LukaszWiktor/zjagahq2/






                share|improve this answer



























                  0














                  There are 2 questions:




                  How can I programatically trigger an update on the variable and run the code if the variable is unchanged?




                  You can hack it this way:



                  this._watchers.find(w => w.expression === "mylist").cb(this.mylist);


                  However, it's not part of the official Vue API. The _watchers list is rather an implementation detail. It may change in the future without any notice.





                  How can I trigger an update if the watched variable is a nested object/array?




                  Use a deep watcher:



                  watch: 
                  mylist:
                  handler: function(val)
                  // Code
                  ,
                  deep: true





                  Working example: https://jsfiddle.net/LukaszWiktor/zjagahq2/






                  share|improve this answer

























                    0












                    0








                    0







                    There are 2 questions:




                    How can I programatically trigger an update on the variable and run the code if the variable is unchanged?




                    You can hack it this way:



                    this._watchers.find(w => w.expression === "mylist").cb(this.mylist);


                    However, it's not part of the official Vue API. The _watchers list is rather an implementation detail. It may change in the future without any notice.





                    How can I trigger an update if the watched variable is a nested object/array?




                    Use a deep watcher:



                    watch: 
                    mylist:
                    handler: function(val)
                    // Code
                    ,
                    deep: true





                    Working example: https://jsfiddle.net/LukaszWiktor/zjagahq2/






                    share|improve this answer













                    There are 2 questions:




                    How can I programatically trigger an update on the variable and run the code if the variable is unchanged?




                    You can hack it this way:



                    this._watchers.find(w => w.expression === "mylist").cb(this.mylist);


                    However, it's not part of the official Vue API. The _watchers list is rather an implementation detail. It may change in the future without any notice.





                    How can I trigger an update if the watched variable is a nested object/array?




                    Use a deep watcher:



                    watch: 
                    mylist:
                    handler: function(val)
                    // Code
                    ,
                    deep: true





                    Working example: https://jsfiddle.net/LukaszWiktor/zjagahq2/







                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Apr 18 '17 at 12:42









                    Lukasz WiktorLukasz Wiktor

                    11.7k25164




                    11.7k25164





















                        0














                        Here is how i did it

                        Frank was on to something, i just couldn't access the "this" context like suggested

                        so all had to do was pass all the args to the method.



                        watch: 
                        myList: (...args) this.handleListChange(...args) ,






                        share|improve this answer



























                          0














                          Here is how i did it

                          Frank was on to something, i just couldn't access the "this" context like suggested

                          so all had to do was pass all the args to the method.



                          watch: 
                          myList: (...args) this.handleListChange(...args) ,






                          share|improve this answer

























                            0












                            0








                            0







                            Here is how i did it

                            Frank was on to something, i just couldn't access the "this" context like suggested

                            so all had to do was pass all the args to the method.



                            watch: 
                            myList: (...args) this.handleListChange(...args) ,






                            share|improve this answer













                            Here is how i did it

                            Frank was on to something, i just couldn't access the "this" context like suggested

                            so all had to do was pass all the args to the method.



                            watch: 
                            myList: (...args) this.handleListChange(...args) ,







                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Nov 14 '18 at 21:05









                            James HarringtonJames Harrington

                            2,3102128




                            2,3102128



























                                draft saved

                                draft discarded
















































                                Thanks for contributing an answer to Stack Overflow!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid


                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.

                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function ()
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f43468022%2fvuejs-programatically-trigger-update-on-watched-variable%23new-answer', 'question_page');

                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                Popular posts from this blog

                                How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

                                Syphilis

                                Darth Vader #20