Skip to content

Can I $watch whole $data but except some properties? #350

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Alexorz opened this issue Jul 14, 2014 · 8 comments
Closed

Can I $watch whole $data but except some properties? #350

Alexorz opened this issue Jul 14, 2014 · 8 comments

Comments

@Alexorz
Copy link

Alexorz commented Jul 14, 2014

See the code here:

new Vue({
    el: '#x',
    data: {
        prop1 : '',
        prop2 : '',
        ...
        result : ''
    },
    ready: function(){
        this.$watch('$data', function(){
            this.load(function( xx ){
                // # This will cause '$data change' again, then do 'load' again, infinity looping...
                this.result = xx;
                // /
                // So, can I watch the whole $data but except the 'result'?
            });
        });
    },
    methods: {
        load: function( callback ){
            var self = this;
            doSomeAsync(function( xx ){
                callback.call(self, xx);
            });
        }
    }
});

Did I use it in the right way?

@Alexorz Alexorz changed the title Can I $watch whole $data but except some? Can I $watch whole $data but except some properties? Jul 14, 2014
@Alexorz
Copy link
Author

Alexorz commented Jul 14, 2014

Or if I could know which property get changed in the $data, the problem can be solved too.

@bdaglish
Copy link

There are a few ways. You can just make the properties a separate object and watch that...

new Vue({
    el: '#x',
    data: {
        properties: {
            prop1 : '',
            prop2 : '',
            ...
        }
        result : ''
    },
    ready: function(){
        this.$watch('properties', function(){
    }

... or, as the documentation says, "Additional properties attached to the ViewModel or the data object in the ready hook will not be observed." , so you can introduce this.result="" there.

Alternatively, again as the docs say, when it comes to processing object in $data, "Properties with keys that starts with $ or _ are skipped." , so you can just rename to "$result" or "_result".

@Alexorz
Copy link
Author

Alexorz commented Jul 14, 2014

Thank you @bdaglish, but I made some test, the result is still not what I want:

Way 1: Use a wrapper scope for not watching "result", can solve my problem, but I feel it's not so good..
Way 2: I try a demo, but I saw property that attached in the ready hook was still being observed.
Way 3: Use "_result" can truly make it not be observed, but "_result" dosen't render in HTML template, demo here.

@yyx990803
Copy link
Member

Interesting use case - I can make some improvements to the $watch interface so that the event includes the exact path that changed inside the object, but that has to wait till the next major release...

Im the meanwhile, grouping them into different objects seems to be the easiest workaround.

@Alexorz
Copy link
Author

Alexorz commented Jul 15, 2014

Okay, I'm using the "grouping" way to fit my case, and looking forward to "$watch" new feature. : )

@Alexorz Alexorz closed this as completed Jul 15, 2014
@Alexorz
Copy link
Author

Alexorz commented Jul 15, 2014

I closed it too fast, the "grouping" way make my code be fatter...
And should it be an 'enhancement' tag?

@asip
Copy link

asip commented Jul 15, 2014

http://jsfiddle.net/QdHrN/7/

@Alexorz
Copy link
Author

Alexorz commented Jul 15, 2014

@asip , the key problem: addcalculate is an async function in my case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants