Vue.set doesn't update object
here is a code snippet
<div id="app">
<div v-for="(value, key) in data">
{{value.value}} {{value.newData}}
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
data: {
'key1': {
value: true
},
'key2': {
value: false
}
}
}
},
mounted: function () {
setTimeout(() => {
var ch = Object.assign(this.data.key1, {newData: 'text'})
Vue.set(this.data, 'key1', ch)
}, 3000);
}
})
</script>
I expect to see
true text
false
But the DOM never updated. It works if I update already existing properties like value.
How can I update DOM and add new key into existing object in Vue?
Thanks.
As @thanksd noticed the Vue.set(this.data.key1, 'newData', 'text') works. During testing this approach I noticed if place
Object.assign(this.data.key1, {newData: 'text'}) code before Vue.set will break the logic. It looks a bit weird at least for me but I hope it would help.
vue.js vuejs2
asked Nov 19 '18 at 20:04
Alexey Sh.Alexey Sh.
4291822
add a comment |
here is a code snippet
<div id="app">
<div v-for="(value, key) in data">
{{value.value}} {{value.newData}}
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
data: {
'key1': {
value: true
},
'key2': {
value: false
}
}
}
},
mounted: function () {
setTimeout(() => {
var ch = Object.assign(this.data.key1, {newData: 'text'})
Vue.set(this.data, 'key1', ch)
}, 3000);
}
})
</script>
I expect to see
true text
false
But the DOM never updated. It works if I update already existing properties like value.
How can I update DOM and add new key into existing object in Vue?
Thanks.
As @thanksd noticed the Vue.set(this.data.key1, 'newData', 'text') works. During testing this approach I noticed if place
Object.assign(this.data.key1, {newData: 'text'}) code before Vue.set will break the logic. It looks a bit weird at least for me but I hope it would help.
vue.js vuejs2
asked Nov 19 '18 at 20:04
Alexey Sh.Alexey Sh.
4291822
1
Considering reading this: vuejs.org/v2/guide/reactivity.html
– George Jempty
Nov 19 '18 at 20:31
add a comment |
here is a code snippet
<div id="app">
<div v-for="(value, key) in data">
{{value.value}} {{value.newData}}
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
data: {
'key1': {
value: true
},
'key2': {
value: false
}
}
}
},
mounted: function () {
setTimeout(() => {
var ch = Object.assign(this.data.key1, {newData: 'text'})
Vue.set(this.data, 'key1', ch)
}, 3000);
}
})
</script>
I expect to see
true text
false
But the DOM never updated. It works if I update already existing properties like value.
How can I update DOM and add new key into existing object in Vue?
Thanks.
As @thanksd noticed the Vue.set(this.data.key1, 'newData', 'text') works. During testing this approach I noticed if place
Object.assign(this.data.key1, {newData: 'text'}) code before Vue.set will break the logic. It looks a bit weird at least for me but I hope it would help.
vue.js vuejs2
asked Nov 19 '18 at 20:04
Alexey Sh.Alexey Sh.
4291822
here is a code snippet
<div id="app">
<div v-for="(value, key) in data">
{{value.value}} {{value.newData}}
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
data: {
'key1': {
value: true
},
'key2': {
value: false
}
}
}
},
mounted: function () {
setTimeout(() => {
var ch = Object.assign(this.data.key1, {newData: 'text'})
Vue.set(this.data, 'key1', ch)
}, 3000);
}
})
</script>
I expect to see
true text
false
But the DOM never updated. It works if I update already existing properties like value.
How can I update DOM and add new key into existing object in Vue?
Thanks.
As @thanksd noticed the Vue.set(this.data.key1, 'newData', 'text') works. During testing this approach I noticed if place
Object.assign(this.data.key1, {newData: 'text'}) code before Vue.set will break the logic. It looks a bit weird at least for me but I hope it would help.
vue.js vuejs2
vue.js vuejs2
asked Nov 19 '18 at 20:04
Alexey Sh.Alexey Sh.
4291822
asked Nov 19 '18 at 20:04
Alexey Sh.Alexey Sh.
4291822
edited Nov 19 '18 at 20:25
Alexey Sh.
asked Nov 19 '18 at 20:04
Alexey Sh.Alexey Sh.
4291822
asked Nov 19 '18 at 20:04
Alexey Sh.Alexey Sh.
4291822
asked Nov 19 '18 at 20:04
Alexey Sh.Alexey Sh.
4291822
4291822
1
Considering reading this: vuejs.org/v2/guide/reactivity.html
– George Jempty
Nov 19 '18 at 20:31
add a comment |
1
Considering reading this: vuejs.org/v2/guide/reactivity.html
– George Jempty
Nov 19 '18 at 20:31
1
1
Considering reading this: vuejs.org/v2/guide/reactivity.html
– George Jempty
Nov 19 '18 at 20:31
Considering reading this: vuejs.org/v2/guide/reactivity.html
– George Jempty
Nov 19 '18 at 20:31
add a comment |
1 Answer
1
active
oldest
votes
Vue.set is used as a workaround for the fact that Vue does not detect when a property is added to an object. So, it seems like you have the right idea: that the newData property doesn't initially exist on the this.data.key1 object, and that you'll need to use Vue.set to add the property and make it reactive.
In your code, Vue.set(this.data, 'key1', ch) is saying set the key1 property of this.data to ch and make it reactive, so that Vue can keep track of it. However, since the value of ch is just the this.data.key1 object with a new newData property, Vue is still unaware that that property is getting added to the object.
What you want to do is set the value of the newData property on this.data.key1, so you would need to do that like so:
Vue.set(this.data.key1, 'newData', 'text');
Here's a working example:
new Vue({
el: '#app',
data() {
return {
data: {
'key1': {
value: true
},
'key2': {
value: false
}
}
}
},
mounted() {
setTimeout(() => {
Vue.set(this.data.key1, 'newData', 'text')
}, 3000);
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(value, key) in data">
{{value.value}} {{value.newData}}
</div>
</div>answered Nov 19 '18 at 20:10
thanksdthanksd
23.8k106676
did you ever tried your snippet?
– Alexey Sh.
Nov 19 '18 at 20:16
thanks. btw, ` Object.assign(this.data.key1, {newData: 'text'}) ` before ` Vue.set ` will break the flow
– Alexey Sh.
Nov 19 '18 at 20:19
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%2f53381843%2fvue-set-doesnt-update-object%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Vue.set is used as a workaround for the fact that Vue does not detect when a property is added to an object. So, it seems like you have the right idea: that the newData property doesn't initially exist on the this.data.key1 object, and that you'll need to use Vue.set to add the property and make it reactive.
In your code, Vue.set(this.data, 'key1', ch) is saying set the key1 property of this.data to ch and make it reactive, so that Vue can keep track of it. However, since the value of ch is just the this.data.key1 object with a new newData property, Vue is still unaware that that property is getting added to the object.
What you want to do is set the value of the newData property on this.data.key1, so you would need to do that like so:
Vue.set(this.data.key1, 'newData', 'text');
Here's a working example:
new Vue({
el: '#app',
data() {
return {
data: {
'key1': {
value: true
},
'key2': {
value: false
}
}
}
},
mounted() {
setTimeout(() => {
Vue.set(this.data.key1, 'newData', 'text')
}, 3000);
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(value, key) in data">
{{value.value}} {{value.newData}}
</div>
</div>answered Nov 19 '18 at 20:10
thanksdthanksd
23.8k106676
did you ever tried your snippet?
– Alexey Sh.
Nov 19 '18 at 20:16
thanks. btw, ` Object.assign(this.data.key1, {newData: 'text'}) ` before ` Vue.set ` will break the flow
– Alexey Sh.
Nov 19 '18 at 20:19
add a comment |
Vue.set is used as a workaround for the fact that Vue does not detect when a property is added to an object. So, it seems like you have the right idea: that the newData property doesn't initially exist on the this.data.key1 object, and that you'll need to use Vue.set to add the property and make it reactive.
In your code, Vue.set(this.data, 'key1', ch) is saying set the key1 property of this.data to ch and make it reactive, so that Vue can keep track of it. However, since the value of ch is just the this.data.key1 object with a new newData property, Vue is still unaware that that property is getting added to the object.
What you want to do is set the value of the newData property on this.data.key1, so you would need to do that like so:
Vue.set(this.data.key1, 'newData', 'text');
Here's a working example:
new Vue({
el: '#app',
data() {
return {
data: {
'key1': {
value: true
},
'key2': {
value: false
}
}
}
},
mounted() {
setTimeout(() => {
Vue.set(this.data.key1, 'newData', 'text')
}, 3000);
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(value, key) in data">
{{value.value}} {{value.newData}}
</div>
</div>answered Nov 19 '18 at 20:10
thanksdthanksd
23.8k106676
did you ever tried your snippet?
– Alexey Sh.
Nov 19 '18 at 20:16
thanks. btw, ` Object.assign(this.data.key1, {newData: 'text'}) ` before ` Vue.set ` will break the flow
– Alexey Sh.
Nov 19 '18 at 20:19
add a comment |
Vue.set is used as a workaround for the fact that Vue does not detect when a property is added to an object. So, it seems like you have the right idea: that the newData property doesn't initially exist on the this.data.key1 object, and that you'll need to use Vue.set to add the property and make it reactive.
In your code, Vue.set(this.data, 'key1', ch) is saying set the key1 property of this.data to ch and make it reactive, so that Vue can keep track of it. However, since the value of ch is just the this.data.key1 object with a new newData property, Vue is still unaware that that property is getting added to the object.
What you want to do is set the value of the newData property on this.data.key1, so you would need to do that like so:
Vue.set(this.data.key1, 'newData', 'text');
Here's a working example:
new Vue({
el: '#app',
data() {
return {
data: {
'key1': {
value: true
},
'key2': {
value: false
}
}
}
},
mounted() {
setTimeout(() => {
Vue.set(this.data.key1, 'newData', 'text')
}, 3000);
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(value, key) in data">
{{value.value}} {{value.newData}}
</div>
</div>answered Nov 19 '18 at 20:10
thanksdthanksd
23.8k106676
Vue.set is used as a workaround for the fact that Vue does not detect when a property is added to an object. So, it seems like you have the right idea: that the newData property doesn't initially exist on the this.data.key1 object, and that you'll need to use Vue.set to add the property and make it reactive.
In your code, Vue.set(this.data, 'key1', ch) is saying set the key1 property of this.data to ch and make it reactive, so that Vue can keep track of it. However, since the value of ch is just the this.data.key1 object with a new newData property, Vue is still unaware that that property is getting added to the object.
What you want to do is set the value of the newData property on this.data.key1, so you would need to do that like so:
Vue.set(this.data.key1, 'newData', 'text');
Here's a working example:
new Vue({
el: '#app',
data() {
return {
data: {
'key1': {
value: true
},
'key2': {
value: false
}
}
}
},
mounted() {
setTimeout(() => {
Vue.set(this.data.key1, 'newData', 'text')
}, 3000);
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(value, key) in data">
{{value.value}} {{value.newData}}
</div>
</div>new Vue({
el: '#app',
data() {
return {
data: {
'key1': {
value: true
},
'key2': {
value: false
}
}
}
},
mounted() {
setTimeout(() => {
Vue.set(this.data.key1, 'newData', 'text')
}, 3000);
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(value, key) in data">
{{value.value}} {{value.newData}}
</div>
</div>new Vue({
el: '#app',
data() {
return {
data: {
'key1': {
value: true
},
'key2': {
value: false
}
}
}
},
mounted() {
setTimeout(() => {
Vue.set(this.data.key1, 'newData', 'text')
}, 3000);
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(value, key) in data">
{{value.value}} {{value.newData}}
</div>
</div>answered Nov 19 '18 at 20:10
thanksdthanksd
23.8k106676
edited Nov 19 '18 at 20:16
answered Nov 19 '18 at 20:10
thanksdthanksd
23.8k106676
answered Nov 19 '18 at 20:10
thanksdthanksd
23.8k106676
answered Nov 19 '18 at 20:10
thanksdthanksd
23.8k106676
23.8k106676
did you ever tried your snippet?
– Alexey Sh.
Nov 19 '18 at 20:16
thanks. btw, ` Object.assign(this.data.key1, {newData: 'text'}) ` before ` Vue.set ` will break the flow
– Alexey Sh.
Nov 19 '18 at 20:19
add a comment |
did you ever tried your snippet?
– Alexey Sh.
Nov 19 '18 at 20:16
thanks. btw, ` Object.assign(this.data.key1, {newData: 'text'}) ` before ` Vue.set ` will break the flow
– Alexey Sh.
Nov 19 '18 at 20:19
did you ever tried your snippet?
– Alexey Sh.
Nov 19 '18 at 20:16
did you ever tried your snippet?
– Alexey Sh.
Nov 19 '18 at 20:16
thanks. btw, ` Object.assign(this.data.key1, {newData: 'text'}) ` before ` Vue.set ` will break the flow
– Alexey Sh.
Nov 19 '18 at 20:19
thanks. btw, ` Object.assign(this.data.key1, {newData: 'text'}) ` before ` Vue.set ` will break the flow
– Alexey Sh.
Nov 19 '18 at 20:19
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%2f53381843%2fvue-set-doesnt-update-object%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
Considering reading this: vuejs.org/v2/guide/reactivity.html
– George Jempty
Nov 19 '18 at 20:31