Vuex getter doesn't recognize state change when add elements to an existing object.
I have an array called tour_plan in my state.
I have two actions in vuex actions.js
- select_location
- select_tour
In select_location I commit to mutation set_location like this
commit("set_location",{day,location_id,location_name,location_payment})
then my mutation is
set_location(state, payload) {
try {
state.tour_plan.push(payload);
} catch (error) {
}
},
What I did was just push the payload to the tour_plan array.
In my second action's mutation I don't push anything to the array. But I add new elements to the same array where I pushed already.
set_tour(state, payload) {
try {
state.tour_plan[state.tour_plan.length - 1].tour_id = payload.tour;
state.tour_plan[state.tour_plan.length - 1].tour_payment = payload.tour_payment;
state.tour_plan[state.tour_plan.length - 1].tour_name = payload.tour_name;
state.stage = 3;
} catch (error) {
}
}
then I have a getter called cost
cost: (state) => {
try {
let arr = ;
state.tour_plan.forEach(element => {
console.log("THIS GETTER RUNS");
if (element.location_name) {
let temp = {};
temp.day = element.day;
temp.item = 'Location fee';
temp.fee = element.location_payment
arr.push(temp);
}
if (element.tour_name) {
let temp = {};
temp.day = element.day;
temp.item = "Tour fee";
temp.fee = element.tour_payment;
arr.push(temp);
}
})
return arr;
} catch (error) {
console.log("ERR", error)
}
}
But the promblem here is this getter run at the first time when I push an object to the tour_plan array. But it won't run when I
change add elements to an already exsits object inside the array?
I have an array called tour_plan in my state.
I have two actions in vuex actions.js
- select_location
- select_tour
In select_location I commit to mutation set_location like this
commit("set_location",{day,location_id,location_name,location_payment})
then my mutation is
set_location(state, payload) {
try {
state.tour_plan.push(payload);
} catch (error) {
}
},
What I did was just push the payload to the tour_plan array.
In my second action's mutation I don't push anything to the array. But I add new elements to the same array where I pushed already.
set_tour(state, payload) {
try {
state.tour_plan[state.tour_plan.length - 1].tour_id = payload.tour;
state.tour_plan[state.tour_plan.length - 1].tour_payment = payload.tour_payment;
state.tour_plan[state.tour_plan.length - 1].tour_name = payload.tour_name;
state.stage = 3;
} catch (error) {
}
}
then I have a getter called cost
cost: (state) => {
try {
let arr = ;
state.tour_plan.forEach(element => {
console.log("THIS GETTER RUNS");
if (element.location_name) {
let temp = {};
temp.day = element.day;
temp.item = 'Location fee';
temp.fee = element.location_payment
arr.push(temp);
}
if (element.tour_name) {
let temp = {};
temp.day = element.day;
temp.item = "Tour fee";
temp.fee = element.tour_payment;
arr.push(temp);
}
})
return arr;
} catch (error) {
console.log("ERR", error)
}
}
But the promblem here is this getter run at the first time when I push an object to the tour_plan array. But it won't run when I
change add elements to an already exsits object inside the array?
vuejs2 vuex
asked Nov 21 at 6:11
Pathum Samararathna
708619
|
show 1 more comment
I have an array called tour_plan in my state.
I have two actions in vuex actions.js
- select_location
- select_tour
In select_location I commit to mutation set_location like this
commit("set_location",{day,location_id,location_name,location_payment})
then my mutation is
set_location(state, payload) {
try {
state.tour_plan.push(payload);
} catch (error) {
}
},
What I did was just push the payload to the tour_plan array.
In my second action's mutation I don't push anything to the array. But I add new elements to the same array where I pushed already.
set_tour(state, payload) {
try {
state.tour_plan[state.tour_plan.length - 1].tour_id = payload.tour;
state.tour_plan[state.tour_plan.length - 1].tour_payment = payload.tour_payment;
state.tour_plan[state.tour_plan.length - 1].tour_name = payload.tour_name;
state.stage = 3;
} catch (error) {
}
}
then I have a getter called cost
cost: (state) => {
try {
let arr = ;
state.tour_plan.forEach(element => {
console.log("THIS GETTER RUNS");
if (element.location_name) {
let temp = {};
temp.day = element.day;
temp.item = 'Location fee';
temp.fee = element.location_payment
arr.push(temp);
}
if (element.tour_name) {
let temp = {};
temp.day = element.day;
temp.item = "Tour fee";
temp.fee = element.tour_payment;
arr.push(temp);
}
})
return arr;
} catch (error) {
console.log("ERR", error)
}
}
But the promblem here is this getter run at the first time when I push an object to the tour_plan array. But it won't run when I
change add elements to an already exsits object inside the array?
I have an array called tour_plan in my state.
I have two actions in vuex actions.js
- select_location
- select_tour
In select_location I commit to mutation set_location like this
commit("set_location",{day,location_id,location_name,location_payment})
then my mutation is
set_location(state, payload) {
try {
state.tour_plan.push(payload);
} catch (error) {
}
},
What I did was just push the payload to the tour_plan array.
In my second action's mutation I don't push anything to the array. But I add new elements to the same array where I pushed already.
set_tour(state, payload) {
try {
state.tour_plan[state.tour_plan.length - 1].tour_id = payload.tour;
state.tour_plan[state.tour_plan.length - 1].tour_payment = payload.tour_payment;
state.tour_plan[state.tour_plan.length - 1].tour_name = payload.tour_name;
state.stage = 3;
} catch (error) {
}
}
then I have a getter called cost
cost: (state) => {
try {
let arr = ;
state.tour_plan.forEach(element => {
console.log("THIS GETTER RUNS");
if (element.location_name) {
let temp = {};
temp.day = element.day;
temp.item = 'Location fee';
temp.fee = element.location_payment
arr.push(temp);
}
if (element.tour_name) {
let temp = {};
temp.day = element.day;
temp.item = "Tour fee";
temp.fee = element.tour_payment;
arr.push(temp);
}
})
return arr;
} catch (error) {
console.log("ERR", error)
}
}
But the promblem here is this getter run at the first time when I push an object to the tour_plan array. But it won't run when I
change add elements to an already exsits object inside the array?
vuejs2 vuex
asked Nov 21 at 6:11
Pathum Samararathna
708619
Did you check it in devtools ? Looks like page is loading before getting data from getters (means its getting old data from state) . If this is the issue then you should userouteBeforeEnterand fetch required data here
– Afraz Ahmad
Nov 21 at 7:22
Potentially a reactivity limitations issue. Check vuejs.org/2016/02/06/common-gotchas , vuejs.org/v2/guide/list.html#Array-Change-Detection and vuex.vuejs.org/guide/… and try to useVue.set(...)
– TommyF
Nov 21 at 8:02
@TommyF I tried to usestate.tour_plan[state.tour_plan.length - 1] = { ...state.tour_plan[state.tour_plan.length - 1], tour_id: payload.tour };
– Pathum Samararathna
Nov 21 at 10:53
But it also not trigger the getter
– Pathum Samararathna
Nov 21 at 10:53
1
@TommyF yes It was a reactivity limitation issue. =) and I update my answer.
– Pathum Samararathna
Nov 23 at 4:43
|
show 1 more comment
I have an array called tour_plan in my state.
I have two actions in vuex actions.js
- select_location
- select_tour
In select_location I commit to mutation set_location like this
commit("set_location",{day,location_id,location_name,location_payment})
then my mutation is
set_location(state, payload) {
try {
state.tour_plan.push(payload);
} catch (error) {
}
},
What I did was just push the payload to the tour_plan array.
In my second action's mutation I don't push anything to the array. But I add new elements to the same array where I pushed already.
set_tour(state, payload) {
try {
state.tour_plan[state.tour_plan.length - 1].tour_id = payload.tour;
state.tour_plan[state.tour_plan.length - 1].tour_payment = payload.tour_payment;
state.tour_plan[state.tour_plan.length - 1].tour_name = payload.tour_name;
state.stage = 3;
} catch (error) {
}
}
then I have a getter called cost
cost: (state) => {
try {
let arr = ;
state.tour_plan.forEach(element => {
console.log("THIS GETTER RUNS");
if (element.location_name) {
let temp = {};
temp.day = element.day;
temp.item = 'Location fee';
temp.fee = element.location_payment
arr.push(temp);
}
if (element.tour_name) {
let temp = {};
temp.day = element.day;
temp.item = "Tour fee";
temp.fee = element.tour_payment;
arr.push(temp);
}
})
return arr;
} catch (error) {
console.log("ERR", error)
}
}
But the promblem here is this getter run at the first time when I push an object to the tour_plan array. But it won't run when I
change add elements to an already exsits object inside the array?
I have an array called tour_plan in my state.
I have two actions in vuex actions.js
- select_location
- select_tour
In select_location I commit to mutation set_location like this
commit("set_location",{day,location_id,location_name,location_payment})
then my mutation is
set_location(state, payload) {
try {
state.tour_plan.push(payload);
} catch (error) {
}
},
What I did was just push the payload to the tour_plan array.
In my second action's mutation I don't push anything to the array. But I add new elements to the same array where I pushed already.
set_tour(state, payload) {
try {
state.tour_plan[state.tour_plan.length - 1].tour_id = payload.tour;
state.tour_plan[state.tour_plan.length - 1].tour_payment = payload.tour_payment;
state.tour_plan[state.tour_plan.length - 1].tour_name = payload.tour_name;
state.stage = 3;
} catch (error) {
}
}
then I have a getter called cost
cost: (state) => {
try {
let arr = ;
state.tour_plan.forEach(element => {
console.log("THIS GETTER RUNS");
if (element.location_name) {
let temp = {};
temp.day = element.day;
temp.item = 'Location fee';
temp.fee = element.location_payment
arr.push(temp);
}
if (element.tour_name) {
let temp = {};
temp.day = element.day;
temp.item = "Tour fee";
temp.fee = element.tour_payment;
arr.push(temp);
}
})
return arr;
} catch (error) {
console.log("ERR", error)
}
}
But the promblem here is this getter run at the first time when I push an object to the tour_plan array. But it won't run when I
change add elements to an already exsits object inside the array?
vuejs2 vuex
asked Nov 21 at 6:11
Pathum Samararathna
708619
I have an array called tour_plan in my state.
I have two actions in vuex actions.js
- select_location
- select_tour
In select_location I commit to mutation set_location like this
commit("set_location",{day,location_id,location_name,location_payment})
then my mutation is
set_location(state, payload) {
try {
state.tour_plan.push(payload);
} catch (error) {
}
},
What I did was just push the payload to the tour_plan array.
In my second action's mutation I don't push anything to the array. But I add new elements to the same array where I pushed already.
set_tour(state, payload) {
try {
state.tour_plan[state.tour_plan.length - 1].tour_id = payload.tour;
state.tour_plan[state.tour_plan.length - 1].tour_payment = payload.tour_payment;
state.tour_plan[state.tour_plan.length - 1].tour_name = payload.tour_name;
state.stage = 3;
} catch (error) {
}
}
then I have a getter called cost
cost: (state) => {
try {
let arr = ;
state.tour_plan.forEach(element => {
console.log("THIS GETTER RUNS");
if (element.location_name) {
let temp = {};
temp.day = element.day;
temp.item = 'Location fee';
temp.fee = element.location_payment
arr.push(temp);
}
if (element.tour_name) {
let temp = {};
temp.day = element.day;
temp.item = "Tour fee";
temp.fee = element.tour_payment;
arr.push(temp);
}
})
return arr;
} catch (error) {
console.log("ERR", error)
}
}
But the promblem here is this getter run at the first time when I push an object to the tour_plan array. But it won't run when I
change add elements to an already exsits object inside the array?
I have an array called tour_plan in my state.
I have two actions in vuex actions.js
- select_location
- select_tour
In select_location I commit to mutation set_location like this
commit("set_location",{day,location_id,location_name,location_payment})
then my mutation is
set_location(state, payload) {
try {
state.tour_plan.push(payload);
} catch (error) {
}
},
What I did was just push the payload to the tour_plan array.
In my second action's mutation I don't push anything to the array. But I add new elements to the same array where I pushed already.
set_tour(state, payload) {
try {
state.tour_plan[state.tour_plan.length - 1].tour_id = payload.tour;
state.tour_plan[state.tour_plan.length - 1].tour_payment = payload.tour_payment;
state.tour_plan[state.tour_plan.length - 1].tour_name = payload.tour_name;
state.stage = 3;
} catch (error) {
}
}
then I have a getter called cost
cost: (state) => {
try {
let arr = ;
state.tour_plan.forEach(element => {
console.log("THIS GETTER RUNS");
if (element.location_name) {
let temp = {};
temp.day = element.day;
temp.item = 'Location fee';
temp.fee = element.location_payment
arr.push(temp);
}
if (element.tour_name) {
let temp = {};
temp.day = element.day;
temp.item = "Tour fee";
temp.fee = element.tour_payment;
arr.push(temp);
}
})
return arr;
} catch (error) {
console.log("ERR", error)
}
}
But the promblem here is this getter run at the first time when I push an object to the tour_plan array. But it won't run when I
change add elements to an already exsits object inside the array?
vuejs2 vuex
vuejs2 vuex
asked Nov 21 at 6:11
Pathum Samararathna
708619
asked Nov 21 at 6:11
Pathum Samararathna
708619
asked Nov 21 at 6:11
Pathum Samararathna
708619
asked Nov 21 at 6:11
Pathum Samararathna
708619
asked Nov 21 at 6:11
Pathum Samararathna
708619
708619
Did you check it in devtools ? Looks like page is loading before getting data from getters (means its getting old data from state) . If this is the issue then you should userouteBeforeEnterand fetch required data here
– Afraz Ahmad
Nov 21 at 7:22
Potentially a reactivity limitations issue. Check vuejs.org/2016/02/06/common-gotchas , vuejs.org/v2/guide/list.html#Array-Change-Detection and vuex.vuejs.org/guide/… and try to useVue.set(...)
– TommyF
Nov 21 at 8:02
@TommyF I tried to usestate.tour_plan[state.tour_plan.length - 1] = { ...state.tour_plan[state.tour_plan.length - 1], tour_id: payload.tour };
– Pathum Samararathna
Nov 21 at 10:53
But it also not trigger the getter
– Pathum Samararathna
Nov 21 at 10:53
1
@TommyF yes It was a reactivity limitation issue. =) and I update my answer.
– Pathum Samararathna
Nov 23 at 4:43
|
show 1 more comment
Did you check it in devtools ? Looks like page is loading before getting data from getters (means its getting old data from state) . If this is the issue then you should userouteBeforeEnterand fetch required data here
– Afraz Ahmad
Nov 21 at 7:22
Potentially a reactivity limitations issue. Check vuejs.org/2016/02/06/common-gotchas , vuejs.org/v2/guide/list.html#Array-Change-Detection and vuex.vuejs.org/guide/… and try to useVue.set(...)
– TommyF
Nov 21 at 8:02
@TommyF I tried to usestate.tour_plan[state.tour_plan.length - 1] = { ...state.tour_plan[state.tour_plan.length - 1], tour_id: payload.tour };
– Pathum Samararathna
Nov 21 at 10:53
But it also not trigger the getter
– Pathum Samararathna
Nov 21 at 10:53
1
@TommyF yes It was a reactivity limitation issue. =) and I update my answer.
– Pathum Samararathna
Nov 23 at 4:43
Did you check it in devtools ? Looks like page is loading before getting data from getters (means its getting old data from state) . If this is the issue then you should use
routeBeforeEnter and fetch required data here– Afraz Ahmad
Nov 21 at 7:22
Did you check it in devtools ? Looks like page is loading before getting data from getters (means its getting old data from state) . If this is the issue then you should use
routeBeforeEnter and fetch required data here– Afraz Ahmad
Nov 21 at 7:22
Potentially a reactivity limitations issue. Check vuejs.org/2016/02/06/common-gotchas , vuejs.org/v2/guide/list.html#Array-Change-Detection and vuex.vuejs.org/guide/… and try to use
Vue.set(...)– TommyF
Nov 21 at 8:02
Potentially a reactivity limitations issue. Check vuejs.org/2016/02/06/common-gotchas , vuejs.org/v2/guide/list.html#Array-Change-Detection and vuex.vuejs.org/guide/… and try to use
Vue.set(...)– TommyF
Nov 21 at 8:02
@TommyF I tried to use
state.tour_plan[state.tour_plan.length - 1] = { ...state.tour_plan[state.tour_plan.length - 1], tour_id: payload.tour };– Pathum Samararathna
Nov 21 at 10:53
@TommyF I tried to use
state.tour_plan[state.tour_plan.length - 1] = { ...state.tour_plan[state.tour_plan.length - 1], tour_id: payload.tour };– Pathum Samararathna
Nov 21 at 10:53
But it also not trigger the getter
– Pathum Samararathna
Nov 21 at 10:53
But it also not trigger the getter
– Pathum Samararathna
Nov 21 at 10:53
1
1
@TommyF yes It was a reactivity limitation issue. =) and I update my answer.
– Pathum Samararathna
Nov 23 at 4:43
@TommyF yes It was a reactivity limitation issue. =) and I update my answer.
– Pathum Samararathna
Nov 23 at 4:43
|
show 1 more comment
1 Answer
1
active
oldest
votes
This was the problem with the way I mutate.
This worked for me.
Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_id', payload.tour)
Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_payment', payload.tour_payment)
Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_name', payload.tour_name)
answered Nov 23 at 4:42
Pathum Samararathna
708619
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%2f53406193%2fvuex-getter-doesnt-recognize-state-change-when-add-elements-to-an-existing-obje%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
This was the problem with the way I mutate.
This worked for me.
Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_id', payload.tour)
Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_payment', payload.tour_payment)
Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_name', payload.tour_name)
answered Nov 23 at 4:42
Pathum Samararathna
708619
add a comment |
This was the problem with the way I mutate.
This worked for me.
Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_id', payload.tour)
Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_payment', payload.tour_payment)
Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_name', payload.tour_name)
answered Nov 23 at 4:42
Pathum Samararathna
708619
add a comment |
This was the problem with the way I mutate.
This worked for me.
Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_id', payload.tour)
Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_payment', payload.tour_payment)
Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_name', payload.tour_name)
answered Nov 23 at 4:42
Pathum Samararathna
708619
This was the problem with the way I mutate.
This worked for me.
Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_id', payload.tour)
Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_payment', payload.tour_payment)
Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_name', payload.tour_name)
answered Nov 23 at 4:42
Pathum Samararathna
708619
answered Nov 23 at 4:42
Pathum Samararathna
708619
answered Nov 23 at 4:42
Pathum Samararathna
708619
answered Nov 23 at 4:42
Pathum Samararathna
708619
708619
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.
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%2f53406193%2fvuex-getter-doesnt-recognize-state-change-when-add-elements-to-an-existing-obje%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
Did you check it in devtools ? Looks like page is loading before getting data from getters (means its getting old data from state) . If this is the issue then you should use
routeBeforeEnterand fetch required data here– Afraz Ahmad
Nov 21 at 7:22
Potentially a reactivity limitations issue. Check vuejs.org/2016/02/06/common-gotchas , vuejs.org/v2/guide/list.html#Array-Change-Detection and vuex.vuejs.org/guide/… and try to use
Vue.set(...)– TommyF
Nov 21 at 8:02
@TommyF I tried to use
state.tour_plan[state.tour_plan.length - 1] = { ...state.tour_plan[state.tour_plan.length - 1], tour_id: payload.tour };– Pathum Samararathna
Nov 21 at 10:53
But it also not trigger the getter
– Pathum Samararathna
Nov 21 at 10:53
1
@TommyF yes It was a reactivity limitation issue. =) and I update my answer.
– Pathum Samararathna
Nov 23 at 4:43