Update data property / object in vue.js
is there a way I can programmatically update the data object / property in vue.js? For example, when my component loads, my data object is:
data: function () {
return {
cars: true,
}
}
And after an event is triggered, I want the data object to look like:
data: function () {
return {
cars: true,
planes: true
}
}
I tried:
<script>
module.exports = {
data: function () {
return {
cars: true
}
},
methods: {
click_me: function () {
this.set(this.planes, true);
}
},
props:
}
</script>
But this gives me the error this.set is not a function. Can someone help?
Thanks in advance!
javascript vue.js
asked Nov 6 '16 at 19:14
Trung Tran
2,8591962109
add a comment |
is there a way I can programmatically update the data object / property in vue.js? For example, when my component loads, my data object is:
data: function () {
return {
cars: true,
}
}
And after an event is triggered, I want the data object to look like:
data: function () {
return {
cars: true,
planes: true
}
}
I tried:
<script>
module.exports = {
data: function () {
return {
cars: true
}
},
methods: {
click_me: function () {
this.set(this.planes, true);
}
},
props:
}
</script>
But this gives me the error this.set is not a function. Can someone help?
Thanks in advance!
javascript vue.js
asked Nov 6 '16 at 19:14
Trung Tran
2,8591962109
Can you show us the context in which you've writtenthis.set?
– RobertAKARobin
Nov 6 '16 at 19:21
Yes - I just updated my question.
– Trung Tran
Nov 6 '16 at 19:33
add a comment |
is there a way I can programmatically update the data object / property in vue.js? For example, when my component loads, my data object is:
data: function () {
return {
cars: true,
}
}
And after an event is triggered, I want the data object to look like:
data: function () {
return {
cars: true,
planes: true
}
}
I tried:
<script>
module.exports = {
data: function () {
return {
cars: true
}
},
methods: {
click_me: function () {
this.set(this.planes, true);
}
},
props:
}
</script>
But this gives me the error this.set is not a function. Can someone help?
Thanks in advance!
javascript vue.js
asked Nov 6 '16 at 19:14
Trung Tran
2,8591962109
is there a way I can programmatically update the data object / property in vue.js? For example, when my component loads, my data object is:
data: function () {
return {
cars: true,
}
}
And after an event is triggered, I want the data object to look like:
data: function () {
return {
cars: true,
planes: true
}
}
I tried:
<script>
module.exports = {
data: function () {
return {
cars: true
}
},
methods: {
click_me: function () {
this.set(this.planes, true);
}
},
props:
}
</script>
But this gives me the error this.set is not a function. Can someone help?
Thanks in advance!
javascript vue.js
javascript vue.js
asked Nov 6 '16 at 19:14
Trung Tran
2,8591962109
asked Nov 6 '16 at 19:14
Trung Tran
2,8591962109
edited Nov 6 '16 at 19:33
asked Nov 6 '16 at 19:14
Trung Tran
2,8591962109
asked Nov 6 '16 at 19:14
Trung Tran
2,8591962109
asked Nov 6 '16 at 19:14
Trung Tran
2,8591962109
2,8591962109
Can you show us the context in which you've writtenthis.set?
– RobertAKARobin
Nov 6 '16 at 19:21
Yes - I just updated my question.
– Trung Tran
Nov 6 '16 at 19:33
add a comment |
Can you show us the context in which you've writtenthis.set?
– RobertAKARobin
Nov 6 '16 at 19:21
Yes - I just updated my question.
– Trung Tran
Nov 6 '16 at 19:33
Can you show us the context in which you've written
this.set?– RobertAKARobin
Nov 6 '16 at 19:21
Can you show us the context in which you've written
this.set?– RobertAKARobin
Nov 6 '16 at 19:21
Yes - I just updated my question.
– Trung Tran
Nov 6 '16 at 19:33
Yes - I just updated my question.
– Trung Tran
Nov 6 '16 at 19:33
add a comment |
1 Answer
1
active
oldest
votes
Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object, So you may create an object and add a new property like that:
data: function () {
return {
someObject:{
cars: true,
}
}
and add the property with the set method:
methods: {
click_me: function () {
this.$set(this.someObject, 'planes', true)
}
}
for vue 1.x use Vue.set(this.someObject, 'planes', true)
reactivity
answered Nov 6 '16 at 22:45
ABDEL-RHMAN
1,743914
Hi - I tried that but I keep gettingvue.common.js?e881:2964 Uncaught TypeError: exp.trim is not a function(…)
– Trung Tran
Nov 6 '16 at 22:53
1
@user1547174 this is looks vue 1.x try thisVue.set(this.someObject, 'planes', true)
– ABDEL-RHMAN
Nov 6 '16 at 23:06
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%2f40453427%2fupdate-data-property-object-in-vue-js%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 does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object, So you may create an object and add a new property like that:
data: function () {
return {
someObject:{
cars: true,
}
}
and add the property with the set method:
methods: {
click_me: function () {
this.$set(this.someObject, 'planes', true)
}
}
for vue 1.x use Vue.set(this.someObject, 'planes', true)
reactivity
answered Nov 6 '16 at 22:45
ABDEL-RHMAN
1,743914
Hi - I tried that but I keep gettingvue.common.js?e881:2964 Uncaught TypeError: exp.trim is not a function(…)
– Trung Tran
Nov 6 '16 at 22:53
1
@user1547174 this is looks vue 1.x try thisVue.set(this.someObject, 'planes', true)
– ABDEL-RHMAN
Nov 6 '16 at 23:06
add a comment |
Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object, So you may create an object and add a new property like that:
data: function () {
return {
someObject:{
cars: true,
}
}
and add the property with the set method:
methods: {
click_me: function () {
this.$set(this.someObject, 'planes', true)
}
}
for vue 1.x use Vue.set(this.someObject, 'planes', true)
reactivity
answered Nov 6 '16 at 22:45
ABDEL-RHMAN
1,743914
Hi - I tried that but I keep gettingvue.common.js?e881:2964 Uncaught TypeError: exp.trim is not a function(…)
– Trung Tran
Nov 6 '16 at 22:53
1
@user1547174 this is looks vue 1.x try thisVue.set(this.someObject, 'planes', true)
– ABDEL-RHMAN
Nov 6 '16 at 23:06
add a comment |
Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object, So you may create an object and add a new property like that:
data: function () {
return {
someObject:{
cars: true,
}
}
and add the property with the set method:
methods: {
click_me: function () {
this.$set(this.someObject, 'planes', true)
}
}
for vue 1.x use Vue.set(this.someObject, 'planes', true)
reactivity
answered Nov 6 '16 at 22:45
ABDEL-RHMAN
1,743914
Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object, So you may create an object and add a new property like that:
data: function () {
return {
someObject:{
cars: true,
}
}
and add the property with the set method:
methods: {
click_me: function () {
this.$set(this.someObject, 'planes', true)
}
}
for vue 1.x use Vue.set(this.someObject, 'planes', true)
reactivity
answered Nov 6 '16 at 22:45
ABDEL-RHMAN
1,743914
edited Nov 6 '16 at 23:16
answered Nov 6 '16 at 22:45
ABDEL-RHMAN
1,743914
answered Nov 6 '16 at 22:45
ABDEL-RHMAN
1,743914
answered Nov 6 '16 at 22:45
ABDEL-RHMAN
1,743914
1,743914
Hi - I tried that but I keep gettingvue.common.js?e881:2964 Uncaught TypeError: exp.trim is not a function(…)
– Trung Tran
Nov 6 '16 at 22:53
1
@user1547174 this is looks vue 1.x try thisVue.set(this.someObject, 'planes', true)
– ABDEL-RHMAN
Nov 6 '16 at 23:06
add a comment |
Hi - I tried that but I keep gettingvue.common.js?e881:2964 Uncaught TypeError: exp.trim is not a function(…)
– Trung Tran
Nov 6 '16 at 22:53
1
@user1547174 this is looks vue 1.x try thisVue.set(this.someObject, 'planes', true)
– ABDEL-RHMAN
Nov 6 '16 at 23:06
Hi - I tried that but I keep getting
vue.common.js?e881:2964 Uncaught TypeError: exp.trim is not a function(…)– Trung Tran
Nov 6 '16 at 22:53
Hi - I tried that but I keep getting
vue.common.js?e881:2964 Uncaught TypeError: exp.trim is not a function(…)– Trung Tran
Nov 6 '16 at 22:53
1
1
@user1547174 this is looks vue 1.x try this
Vue.set(this.someObject, 'planes', true)– ABDEL-RHMAN
Nov 6 '16 at 23:06
@user1547174 this is looks vue 1.x try this
Vue.set(this.someObject, 'planes', true)– ABDEL-RHMAN
Nov 6 '16 at 23:06
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f40453427%2fupdate-data-property-object-in-vue-js%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
Can you show us the context in which you've written
this.set?– RobertAKARobin
Nov 6 '16 at 19:21
Yes - I just updated my question.
– Trung Tran
Nov 6 '16 at 19:33