Mixing
Store value changes but doesn't affect computed property in component
I'm building a tree view using VueJS and I want to save the last clicked item in a store then use this store to show the last clicked item in a component.
I use a computed property in the the component where I want to show the item. The problem is that when the store changes it doesn't affect the computed property in the component.
The relative code is shown in this link:
https://jsfiddle.net/eywraw8t/527884/
Vue.component('category-list', {
template: `
<div>
<b>{{selectedCat}}</b>
<ul>
<category v-for='(catg, catgIdx) in categories' :category='catg' :key='catgIdx'
v-on:category-selected='categorySelected'/>
</ul>
</div>
`,
props: {
categories: { type: Array, default: () => }
},
computed:{
selectedCat(){
return bookmarksStore.state.selectedCategory
}
}
})
vue.js vue-reactivity
asked Jan 2 at 9:30
Oussama HeOussama He
71112
add a comment |
I'm building a tree view using VueJS and I want to save the last clicked item in a store then use this store to show the last clicked item in a component.
I use a computed property in the the component where I want to show the item. The problem is that when the store changes it doesn't affect the computed property in the component.
The relative code is shown in this link:
https://jsfiddle.net/eywraw8t/527884/
Vue.component('category-list', {
template: `
<div>
<b>{{selectedCat}}</b>
<ul>
<category v-for='(catg, catgIdx) in categories' :category='catg' :key='catgIdx'
v-on:category-selected='categorySelected'/>
</ul>
</div>
`,
props: {
categories: { type: Array, default: () => }
},
computed:{
selectedCat(){
return bookmarksStore.state.selectedCategory
}
}
})
vue.js vue-reactivity
asked Jan 2 at 9:30
Oussama HeOussama He
71112
add a comment |
I'm building a tree view using VueJS and I want to save the last clicked item in a store then use this store to show the last clicked item in a component.
I use a computed property in the the component where I want to show the item. The problem is that when the store changes it doesn't affect the computed property in the component.
The relative code is shown in this link:
https://jsfiddle.net/eywraw8t/527884/
Vue.component('category-list', {
template: `
<div>
<b>{{selectedCat}}</b>
<ul>
<category v-for='(catg, catgIdx) in categories' :category='catg' :key='catgIdx'
v-on:category-selected='categorySelected'/>
</ul>
</div>
`,
props: {
categories: { type: Array, default: () => }
},
computed:{
selectedCat(){
return bookmarksStore.state.selectedCategory
}
}
})
vue.js vue-reactivity
asked Jan 2 at 9:30
Oussama HeOussama He
71112
I'm building a tree view using VueJS and I want to save the last clicked item in a store then use this store to show the last clicked item in a component.
I use a computed property in the the component where I want to show the item. The problem is that when the store changes it doesn't affect the computed property in the component.
The relative code is shown in this link:
https://jsfiddle.net/eywraw8t/527884/
Vue.component('category-list', {
template: `
<div>
<b>{{selectedCat}}</b>
<ul>
<category v-for='(catg, catgIdx) in categories' :category='catg' :key='catgIdx'
v-on:category-selected='categorySelected'/>
</ul>
</div>
`,
props: {
categories: { type: Array, default: () => }
},
computed:{
selectedCat(){
return bookmarksStore.state.selectedCategory
}
}
})
vue.js vue-reactivity
vue.js vue-reactivity
asked Jan 2 at 9:30
Oussama HeOussama He
71112
asked Jan 2 at 9:30
Oussama HeOussama He
71112
asked Jan 2 at 9:30
Oussama HeOussama He
71112
asked Jan 2 at 9:30
Oussama HeOussama He
71112
asked Jan 2 at 9:30
Oussama HeOussama He
71112
71112
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You don't have dependency on reactive data (data,props) on your computed. So, when bookmarksStore change, your computed property is not triggered.
I would suggest to use Vuex in your case to create your store.
Using Vuex
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
selectedCategory: {name: ""}
},
getters: {
getselectedCategory: state => {
return state.selectedCategory;
}
},
mutations:{
selectCategory(state, payload) {
state.selectedCategory.name = payload
}
}
})
new Vue({
el: "#app",
store,
data: {
...
Then, you could use this.$store.commit('selectCategory', category) to update the selectedCategory of your store and your computed property would look like
computed:{
selectedCat(){
return this.$store.getters.getselectedCategory
}
}
Without Vuex
If you don't want to use Vuex, pass your bookmarksStore in your Vue root instance data.
new Vue({
el: "#app",
data: {
bookmarksStore: new BookmarksStore(),
...
You can now pass the bookmarksStore to the child components using props and update it using events passed to the Vue root instance. This way, the bookmarksStore being a props in each child component, the computed property will be triggered.
answered Jan 2 at 14:40
charlycoucharlycou
541112
can I solve this problem without using vuex? If yes, how can I do this?
– Oussama He
Jan 2 at 21:12
I just updated my answer to solve your problem without Vuex. Although I highly recommend using Vuex in your case.
– charlycou
Jan 3 at 8:40
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%2f54003955%2fstore-value-changes-but-doesnt-affect-computed-property-in-component%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
You don't have dependency on reactive data (data,props) on your computed. So, when bookmarksStore change, your computed property is not triggered.
I would suggest to use Vuex in your case to create your store.
Using Vuex
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
selectedCategory: {name: ""}
},
getters: {
getselectedCategory: state => {
return state.selectedCategory;
}
},
mutations:{
selectCategory(state, payload) {
state.selectedCategory.name = payload
}
}
})
new Vue({
el: "#app",
store,
data: {
...
Then, you could use this.$store.commit('selectCategory', category) to update the selectedCategory of your store and your computed property would look like
computed:{
selectedCat(){
return this.$store.getters.getselectedCategory
}
}
Without Vuex
If you don't want to use Vuex, pass your bookmarksStore in your Vue root instance data.
new Vue({
el: "#app",
data: {
bookmarksStore: new BookmarksStore(),
...
You can now pass the bookmarksStore to the child components using props and update it using events passed to the Vue root instance. This way, the bookmarksStore being a props in each child component, the computed property will be triggered.
answered Jan 2 at 14:40
charlycoucharlycou
541112
can I solve this problem without using vuex? If yes, how can I do this?
– Oussama He
Jan 2 at 21:12
I just updated my answer to solve your problem without Vuex. Although I highly recommend using Vuex in your case.
– charlycou
Jan 3 at 8:40
add a comment |
You don't have dependency on reactive data (data,props) on your computed. So, when bookmarksStore change, your computed property is not triggered.
I would suggest to use Vuex in your case to create your store.
Using Vuex
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
selectedCategory: {name: ""}
},
getters: {
getselectedCategory: state => {
return state.selectedCategory;
}
},
mutations:{
selectCategory(state, payload) {
state.selectedCategory.name = payload
}
}
})
new Vue({
el: "#app",
store,
data: {
...
Then, you could use this.$store.commit('selectCategory', category) to update the selectedCategory of your store and your computed property would look like
computed:{
selectedCat(){
return this.$store.getters.getselectedCategory
}
}
Without Vuex
If you don't want to use Vuex, pass your bookmarksStore in your Vue root instance data.
new Vue({
el: "#app",
data: {
bookmarksStore: new BookmarksStore(),
...
You can now pass the bookmarksStore to the child components using props and update it using events passed to the Vue root instance. This way, the bookmarksStore being a props in each child component, the computed property will be triggered.
answered Jan 2 at 14:40
charlycoucharlycou
541112
can I solve this problem without using vuex? If yes, how can I do this?
– Oussama He
Jan 2 at 21:12
I just updated my answer to solve your problem without Vuex. Although I highly recommend using Vuex in your case.
– charlycou
Jan 3 at 8:40
add a comment |
You don't have dependency on reactive data (data,props) on your computed. So, when bookmarksStore change, your computed property is not triggered.
I would suggest to use Vuex in your case to create your store.
Using Vuex
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
selectedCategory: {name: ""}
},
getters: {
getselectedCategory: state => {
return state.selectedCategory;
}
},
mutations:{
selectCategory(state, payload) {
state.selectedCategory.name = payload
}
}
})
new Vue({
el: "#app",
store,
data: {
...
Then, you could use this.$store.commit('selectCategory', category) to update the selectedCategory of your store and your computed property would look like
computed:{
selectedCat(){
return this.$store.getters.getselectedCategory
}
}
Without Vuex
If you don't want to use Vuex, pass your bookmarksStore in your Vue root instance data.
new Vue({
el: "#app",
data: {
bookmarksStore: new BookmarksStore(),
...
You can now pass the bookmarksStore to the child components using props and update it using events passed to the Vue root instance. This way, the bookmarksStore being a props in each child component, the computed property will be triggered.
answered Jan 2 at 14:40
charlycoucharlycou
541112
You don't have dependency on reactive data (data,props) on your computed. So, when bookmarksStore change, your computed property is not triggered.
I would suggest to use Vuex in your case to create your store.
Using Vuex
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
selectedCategory: {name: ""}
},
getters: {
getselectedCategory: state => {
return state.selectedCategory;
}
},
mutations:{
selectCategory(state, payload) {
state.selectedCategory.name = payload
}
}
})
new Vue({
el: "#app",
store,
data: {
...
Then, you could use this.$store.commit('selectCategory', category) to update the selectedCategory of your store and your computed property would look like
computed:{
selectedCat(){
return this.$store.getters.getselectedCategory
}
}
Without Vuex
If you don't want to use Vuex, pass your bookmarksStore in your Vue root instance data.
new Vue({
el: "#app",
data: {
bookmarksStore: new BookmarksStore(),
...
You can now pass the bookmarksStore to the child components using props and update it using events passed to the Vue root instance. This way, the bookmarksStore being a props in each child component, the computed property will be triggered.
answered Jan 2 at 14:40
charlycoucharlycou
541112
edited Jan 3 at 8:38
answered Jan 2 at 14:40
charlycoucharlycou
541112
answered Jan 2 at 14:40
charlycoucharlycou
541112
answered Jan 2 at 14:40
charlycoucharlycou
541112
541112
can I solve this problem without using vuex? If yes, how can I do this?
– Oussama He
Jan 2 at 21:12
I just updated my answer to solve your problem without Vuex. Although I highly recommend using Vuex in your case.
– charlycou
Jan 3 at 8:40
add a comment |
can I solve this problem without using vuex? If yes, how can I do this?
– Oussama He
Jan 2 at 21:12
I just updated my answer to solve your problem without Vuex. Although I highly recommend using Vuex in your case.
– charlycou
Jan 3 at 8:40
can I solve this problem without using vuex? If yes, how can I do this?
– Oussama He
Jan 2 at 21:12
can I solve this problem without using vuex? If yes, how can I do this?
– Oussama He
Jan 2 at 21:12
I just updated my answer to solve your problem without Vuex. Although I highly recommend using Vuex in your case.
– charlycou
Jan 3 at 8:40
I just updated my answer to solve your problem without Vuex. Although I highly recommend using Vuex in your case.
– charlycou
Jan 3 at 8:40
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%2f54003955%2fstore-value-changes-but-doesnt-affect-computed-property-in-component%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
