Why this computed property is showing changes (Vue)
up vote
1
down vote
favorite
I am changing properties using some buttons. When I click the buttons the data is updated in the UI, even the computed1, but not the console.log("computed1"). I think it's because I am changing its properties and not the entire object. But if it's not triggered, why the UI is updated ? Could you explain me ? I couldn't find something like this in the documentation.
Code: https://jsfiddle.net/1hr7cy5d/
var example1 = new Vue(
el: '#example',
data: function()
return
item:
aaa: 'aaa',
bbb: 'bbb',
ccc: 'ccc'
,
computed:
computed1: function()
console.log("computed1");
let item = this.item
return item;
,
,
methods:
method1()
console.log("method1")
this.item.aaa = 'xxxx';
,
method2()
console.log("method2")
this.item["bbb"] = 'yyyyy';
,
method3()
console.log("method3")
this.$set(this.item, "ccc", "zzzzz")
,
method4() ,
);<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="example">
<button @click="method1()">method1</button>
<button @click="method2()">method2</button>
<button @click="method3()">method3</button>
<button @click="method4()">method4</button>
<pre>item</pre>
<pre>computed1</pre>
</div>javascript vuejs2 computed-properties
asked Nov 10 at 17:23
eag845
1698
add a comment |
up vote
1
down vote
favorite
I am changing properties using some buttons. When I click the buttons the data is updated in the UI, even the computed1, but not the console.log("computed1"). I think it's because I am changing its properties and not the entire object. But if it's not triggered, why the UI is updated ? Could you explain me ? I couldn't find something like this in the documentation.
Code: https://jsfiddle.net/1hr7cy5d/
var example1 = new Vue(
el: '#example',
data: function()
return
item:
aaa: 'aaa',
bbb: 'bbb',
ccc: 'ccc'
,
computed:
computed1: function()
console.log("computed1");
let item = this.item
return item;
,
,
methods:
method1()
console.log("method1")
this.item.aaa = 'xxxx';
,
method2()
console.log("method2")
this.item["bbb"] = 'yyyyy';
,
method3()
console.log("method3")
this.$set(this.item, "ccc", "zzzzz")
,
method4() ,
);<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="example">
<button @click="method1()">method1</button>
<button @click="method2()">method2</button>
<button @click="method3()">method3</button>
<button @click="method4()">method4</button>
<pre>item</pre>
<pre>computed1</pre>
</div>javascript vuejs2 computed-properties
asked Nov 10 at 17:23
eag845
1698
You're watching for changes onthis.itembut making changing tothis.item.PROP. If you mutatethis.itemdirectly then computed1 will run, else, it doesn't see it as a change and won't run. jsfiddle.net/1hr7cy5d/4.
– Dennis Martinez
Nov 10 at 17:35
but whycomputed1is showing changes?
– eag845
Nov 10 at 17:38
@DennisMartinez but then why does it update the display? Shouldn't it re-run the computed function then if it's updating the display?
– Derek Pollard
Nov 10 at 18:04
2
computed1isn't returning a new value but a reference tothis.itembecause in javascript objects are by reference, not by value. You're telling Vue to printthis.itemand you're updating properties ofthis.item. It won't rerun the function becausethis.itemhasn't changed but rather a property onthis.item. Vue doesn't support nested computed properties. You may want to trywatchwith and option ofdeep
– Dennis Martinez
Nov 10 at 18:16
@DennisMartinez you should post as an answer :)
– Derek Pollard
Nov 10 at 18:46
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I am changing properties using some buttons. When I click the buttons the data is updated in the UI, even the computed1, but not the console.log("computed1"). I think it's because I am changing its properties and not the entire object. But if it's not triggered, why the UI is updated ? Could you explain me ? I couldn't find something like this in the documentation.
Code: https://jsfiddle.net/1hr7cy5d/
var example1 = new Vue(
el: '#example',
data: function()
return
item:
aaa: 'aaa',
bbb: 'bbb',
ccc: 'ccc'
,
computed:
computed1: function()
console.log("computed1");
let item = this.item
return item;
,
,
methods:
method1()
console.log("method1")
this.item.aaa = 'xxxx';
,
method2()
console.log("method2")
this.item["bbb"] = 'yyyyy';
,
method3()
console.log("method3")
this.$set(this.item, "ccc", "zzzzz")
,
method4() ,
);<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="example">
<button @click="method1()">method1</button>
<button @click="method2()">method2</button>
<button @click="method3()">method3</button>
<button @click="method4()">method4</button>
<pre>item</pre>
<pre>computed1</pre>
</div>javascript vuejs2 computed-properties
asked Nov 10 at 17:23
eag845
1698
I am changing properties using some buttons. When I click the buttons the data is updated in the UI, even the computed1, but not the console.log("computed1"). I think it's because I am changing its properties and not the entire object. But if it's not triggered, why the UI is updated ? Could you explain me ? I couldn't find something like this in the documentation.
Code: https://jsfiddle.net/1hr7cy5d/
var example1 = new Vue(
el: '#example',
data: function()
return
item:
aaa: 'aaa',
bbb: 'bbb',
ccc: 'ccc'
,
computed:
computed1: function()
console.log("computed1");
let item = this.item
return item;
,
,
methods:
method1()
console.log("method1")
this.item.aaa = 'xxxx';
,
method2()
console.log("method2")
this.item["bbb"] = 'yyyyy';
,
method3()
console.log("method3")
this.$set(this.item, "ccc", "zzzzz")
,
method4() ,
);<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="example">
<button @click="method1()">method1</button>
<button @click="method2()">method2</button>
<button @click="method3()">method3</button>
<button @click="method4()">method4</button>
<pre>item</pre>
<pre>computed1</pre>
</div>var example1 = new Vue(
el: '#example',
data: function()
return
item:
aaa: 'aaa',
bbb: 'bbb',
ccc: 'ccc'
,
computed:
computed1: function()
console.log("computed1");
let item = this.item
return item;
,
,
methods:
method1()
console.log("method1")
this.item.aaa = 'xxxx';
,
method2()
console.log("method2")
this.item["bbb"] = 'yyyyy';
,
method3()
console.log("method3")
this.$set(this.item, "ccc", "zzzzz")
,
method4() ,
);<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="example">
<button @click="method1()">method1</button>
<button @click="method2()">method2</button>
<button @click="method3()">method3</button>
<button @click="method4()">method4</button>
<pre>item</pre>
<pre>computed1</pre>
</div>var example1 = new Vue(
el: '#example',
data: function()
return
item:
aaa: 'aaa',
bbb: 'bbb',
ccc: 'ccc'
,
computed:
computed1: function()
console.log("computed1");
let item = this.item
return item;
,
,
methods:
method1()
console.log("method1")
this.item.aaa = 'xxxx';
,
method2()
console.log("method2")
this.item["bbb"] = 'yyyyy';
,
method3()
console.log("method3")
this.$set(this.item, "ccc", "zzzzz")
,
method4() ,
);<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="example">
<button @click="method1()">method1</button>
<button @click="method2()">method2</button>
<button @click="method3()">method3</button>
<button @click="method4()">method4</button>
<pre>item</pre>
<pre>computed1</pre>
</div>javascript vuejs2 computed-properties
javascript vuejs2 computed-properties
asked Nov 10 at 17:23
eag845
1698
asked Nov 10 at 17:23
eag845
1698
edited Nov 10 at 18:46
asked Nov 10 at 17:23
eag845
1698
asked Nov 10 at 17:23
eag845
1698
asked Nov 10 at 17:23
eag845
1698
1698
You're watching for changes onthis.itembut making changing tothis.item.PROP. If you mutatethis.itemdirectly then computed1 will run, else, it doesn't see it as a change and won't run. jsfiddle.net/1hr7cy5d/4.
– Dennis Martinez
Nov 10 at 17:35
but whycomputed1is showing changes?
– eag845
Nov 10 at 17:38
@DennisMartinez but then why does it update the display? Shouldn't it re-run the computed function then if it's updating the display?
– Derek Pollard
Nov 10 at 18:04
2
computed1isn't returning a new value but a reference tothis.itembecause in javascript objects are by reference, not by value. You're telling Vue to printthis.itemand you're updating properties ofthis.item. It won't rerun the function becausethis.itemhasn't changed but rather a property onthis.item. Vue doesn't support nested computed properties. You may want to trywatchwith and option ofdeep
– Dennis Martinez
Nov 10 at 18:16
@DennisMartinez you should post as an answer :)
– Derek Pollard
Nov 10 at 18:46
add a comment |
You're watching for changes onthis.itembut making changing tothis.item.PROP. If you mutatethis.itemdirectly then computed1 will run, else, it doesn't see it as a change and won't run. jsfiddle.net/1hr7cy5d/4.
– Dennis Martinez
Nov 10 at 17:35
but whycomputed1is showing changes?
– eag845
Nov 10 at 17:38
@DennisMartinez but then why does it update the display? Shouldn't it re-run the computed function then if it's updating the display?
– Derek Pollard
Nov 10 at 18:04
2
computed1isn't returning a new value but a reference tothis.itembecause in javascript objects are by reference, not by value. You're telling Vue to printthis.itemand you're updating properties ofthis.item. It won't rerun the function becausethis.itemhasn't changed but rather a property onthis.item. Vue doesn't support nested computed properties. You may want to trywatchwith and option ofdeep
– Dennis Martinez
Nov 10 at 18:16
@DennisMartinez you should post as an answer :)
– Derek Pollard
Nov 10 at 18:46
You're watching for changes on
this.item but making changing to this.item.PROP. If you mutate this.item directly then computed1 will run, else, it doesn't see it as a change and won't run. jsfiddle.net/1hr7cy5d/4.– Dennis Martinez
Nov 10 at 17:35
You're watching for changes on
this.item but making changing to this.item.PROP. If you mutate this.item directly then computed1 will run, else, it doesn't see it as a change and won't run. jsfiddle.net/1hr7cy5d/4.– Dennis Martinez
Nov 10 at 17:35
but why
computed1 is showing changes?– eag845
Nov 10 at 17:38
but why
computed1 is showing changes?– eag845
Nov 10 at 17:38
@DennisMartinez but then why does it update the display? Shouldn't it re-run the computed function then if it's updating the display?
– Derek Pollard
Nov 10 at 18:04
@DennisMartinez but then why does it update the display? Shouldn't it re-run the computed function then if it's updating the display?
– Derek Pollard
Nov 10 at 18:04
2
2
computed1 isn't returning a new value but a reference to this.item because in javascript objects are by reference, not by value. You're telling Vue to print this.item and you're updating properties of this.item. It won't rerun the function because this.item hasn't changed but rather a property on this.item. Vue doesn't support nested computed properties. You may want to try watch with and option of deep– Dennis Martinez
Nov 10 at 18:16
computed1 isn't returning a new value but a reference to this.item because in javascript objects are by reference, not by value. You're telling Vue to print this.item and you're updating properties of this.item. It won't rerun the function because this.item hasn't changed but rather a property on this.item. Vue doesn't support nested computed properties. You may want to try watch with and option of deep– Dennis Martinez
Nov 10 at 18:16
@DennisMartinez you should post as an answer :)
– Derek Pollard
Nov 10 at 18:46
@DennisMartinez you should post as an answer :)
– Derek Pollard
Nov 10 at 18:46
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
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%2f53241514%2fwhy-this-computed-property-is-showing-changes-vue%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
You're watching for changes on
this.itembut making changing tothis.item.PROP. If you mutatethis.itemdirectly then computed1 will run, else, it doesn't see it as a change and won't run. jsfiddle.net/1hr7cy5d/4.– Dennis Martinez
Nov 10 at 17:35
but why
computed1is showing changes?– eag845
Nov 10 at 17:38
@DennisMartinez but then why does it update the display? Shouldn't it re-run the computed function then if it's updating the display?
– Derek Pollard
Nov 10 at 18:04
2
computed1isn't returning a new value but a reference tothis.itembecause in javascript objects are by reference, not by value. You're telling Vue to printthis.itemand you're updating properties ofthis.item. It won't rerun the function becausethis.itemhasn't changed but rather a property onthis.item. Vue doesn't support nested computed properties. You may want to trywatchwith and option ofdeep– Dennis Martinez
Nov 10 at 18:16
@DennisMartinez you should post as an answer :)
– Derek Pollard
Nov 10 at 18:46