Comments (10)
@yyx990803 good points.
@ayamflow for my purposes, that worked. Here's what I've done so far, and it's saved a fetch:
this.watched = [this.user, this.project];
this.$watch('watched', function() {
if (this.user && this.project) {
this.fetchData();
}
});
Going to try that in a few more places, but seems to do the trick for now.
Thanks!
from discussion.
The second syntax doesn't clearly indicate what conditions should be met to trigger the callback: should it be &&
or ||
? ||
is essentially the same with the first syntax. In the case of &&
, since these two values can change independently at any time, you need to specify a time window for them to be considered "changed together." And you probably need to implement that logic yourself.
from discussion.
In Angular it was possible to combine
$watch`like this:
$scope.foo = 10;
$scope.bar = 'hello';
$scope.$watch('foo+bar', callback);
But I think it was possible because of their dirty-checking mecanism.
Have you tried something like this ?
this.watched = [this.user, this.project];
this.$watch('watched', cb);
from discussion.
I have a related problem. I'm converting a Rivets app which uses an adapter to beautifully integrate with chrome.storage.
I was trying to achieve the same with Vue, and hoping there was a way to watch an object, and get the callback anytime there was a change in a property of the object.
window.vm = new Vue
el: '.options'
data:
options: # by default
'flavour': 'banana'
'color': 'yellow'
'size': 3
'shape': 'square'
'amount': 40
created: ->
chrome.storage.local.get @options, (results) =>
@options = results
watch:
options: (changedProperties) -> chrome.storage.local.set(changedProperties)
However the watch callback only get's executed if the object itself is replaced like with @options = results
. The callback never gets executed when a property changes as a result a binding like v-model="options.flavour"
.
Ideally one of the arguments in the watch callback should receive an object with the changes. So if for example the flavour had changed to "chocolate", changedProperties
would contain the following object: {flavour: chocolate"}
from discussion.
I think what you're looking for is the ability to 'deep' watch an object, which Vue can do, but you'll have to do it in the ready callback. See $watch in the guide
from discussion.
@TMiguelT that is indeed what I was looking for, however some things don't behave as expected.
For example, newVal and oldVal seem to be the same, if you look at the log and change options.a
in this example: http://jsfiddle.net/4rrpwd75/3/
Besides that, is there a way to know which properties changed?
Thanks
from discussion.
No if you want the new and old value of a single value I think you need to watch it directly.
from discussion.
@yyx990803 do you think it is viable to improve the arguments which are passed into the callback when deep listening for changes in objects? Right now oldVal seems to be the same as newVal.
Form my point of view it would be useful to receive an object which only contained the changes, but that might be too much to ask..
Should I open a bug report about oldVal and newVal being the same?
from discussion.
Well oldVal
and newVal
are indeed the same object, it's just mutated. I think it is possible to improve the arguments provided to deep watch callbacks though.
from discussion.
@yyx990803 is there any progress (or a recommended workaround) with this aspect yet? I'm deep watching objects containing many children and really need a way of knowing which ones changed in the watch callback, scanning all the children for changes is a terrible performance hit.
from discussion.
Related Issues (20)
- Use ||(or) in v-if (with nuxt js)
- Instantiate a copy of a component directly in that component HOT 1
- Call pre-defined javascript method on vue js event
- What about js-data.io?
- How to make vue bind to, or work with, html in properties
- Convert VueJS 1 to VueJS 2 HOT 2
- Third Party Libraries - Make non reactive?
- why v-switch not included in vuejs and what the alternative way HOT 1
- Use raw html inside v-bind
- iOS event bound using addEventListener is not triggering
- How to validate when blur a component.
- Google is not defined HOT 2
- vuejs can not find method or variable inside a callback function HOT 2
- Thousands of rows performance HOT 1
- how to pass Header + Body in POST api using Vue JS-axios HOT 4
- Conditional rendering and child component
- Fetch the value of element dynamically
- Vue breaks DataTables and Pace JS
- Bootstrap4 tag b-form-input has problem with @blur
- Invalid prop: Expected `Basic type`, got Nulll.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from discussion.