VueJS programatically trigger update on watched variable
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
add a comment |
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
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
add a comment |
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
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
vue.js
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
add a comment |
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
add a comment |
3 Answers
3
active
oldest
votes
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.
add a comment |
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/
add a comment |
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) ,
add a comment |
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
add a comment |
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.
add a comment |
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.
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.
answered Apr 18 '17 at 10:10
Frank ProvostFrank Provost
3,83911537
3,83911537
add a comment |
add a comment |
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/
add a comment |
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/
add a comment |
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/
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/
answered Apr 18 '17 at 12:42
Lukasz WiktorLukasz Wiktor
11.7k25164
11.7k25164
add a comment |
add a comment |
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) ,
add a comment |
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) ,
add a comment |
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) ,
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) ,
answered Nov 14 '18 at 21:05
James HarringtonJames Harrington
2,3102128
2,3102128
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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