I'm a newcomer to Vuex and I am facing issues while using a variable as a parameter to fetch card information from state.cards.
store.js:
export default new Vuex.Store({
state: {
cards: []
},
getters: {
getCard(state) {
return id => state.cards.find(card => id === card.id);
}
}
});
card.vue:
computed: {
card() {
var id = this.$store.getters.getCard(this.$route.params.card);
console.log(id); // shows 88
console.log(this.$store.getters.getCard(88)); // returns card details
console.log(this.$store.getters.getCard(id)); // returns undefined
return populateCard(
this.$store.getters.getCard(id)
);
}
}
As seen in the code snippet above, the getter function successfully retrieves data when the literal value 88 is passed, but encounters an issue when a variable id set to 88 is used as the parameter. I am puzzled by this behavior and unable to identify the problem.