Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
Ask Question
I'm trying to purchase a stock but when I click on buy and then see my Portfolio.vue, 'm getting the error as below
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'find' of undefined"
found in
---> <Portfolio> at src/components/portfolio/Portfolio.vue
<App> at src/App.vue
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1893
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
Vue._render @ vue.runtime.esm.js?2b0e:3571
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
merged @ vue.runtime.esm.js?2b0e:3322
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
updateChildren @ vue.runtime.esm.js?2b0e:6260
patchVnode @ vue.runtime.esm.js?2b0e:6363
updateChildren @ vue.runtime.esm.js?2b0e:6237
patchVnode @ vue.runtime.esm.js?2b0e:6363
updateChildren @ vue.runtime.esm.js?2b0e:6237
patchVnode @ vue.runtime.esm.js?2b0e:6363
patch @ vue.runtime.esm.js?2b0e:6526
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
eval @ vue-router.esm.js?4af9:2989
eval @ vue-router.esm.js?4af9:2988
updateRoute @ vue-router.esm.js?4af9:2409
eval @ vue-router.esm.js?4af9:2263
eval @ vue-router.esm.js?4af9:2397
step @ vue-router.esm.js?4af9:2001
step @ vue-router.esm.js?4af9:2008
runQueue @ vue-router.esm.js?4af9:2012
eval @ vue-router.esm.js?4af9:2392
step @ vue-router.esm.js?4af9:2001
eval @ vue-router.esm.js?4af9:2005
eval @ vue-router.esm.js?4af9:2379
eval @ vue-router.esm.js?4af9:2162
iterator @ vue-router.esm.js?4af9:2357
step @ vue-router.esm.js?4af9:2004
step @ vue-router.esm.js?4af9:2008
step @ vue-router.esm.js?4af9:2008
runQueue @ vue-router.esm.js?4af9:2012
confirmTransition @ vue-router.esm.js?4af9:2387
transitionTo @ vue-router.esm.js?4af9:2260
push @ vue-router.esm.js?4af9:2601
push @ vue-router.esm.js?4af9:3023
handler @ vue-router.esm.js?4af9:1139
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
invoker @ vue.runtime.esm.js?2b0e:2188
original._wrapper @ vue.runtime.esm.js?2b0e:6961
Show 30 more frames
vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read property 'find' of undefined
at eval (portfolio.js?9639:48)
at Array.map (<anonymous>)
at stockPortfolio (portfolio.js?9639:47)
at wrappedGetter (vuex.esm.js?2f62:881)
at Vue.eval (vuex.esm.js?2f62:140)
at Watcher.get (vue.runtime.esm.js?2b0e:4495)
at Watcher.evaluate (vue.runtime.esm.js?2b0e:4597)
at Vue.computedGetter [as stockPortfolio] (vue.runtime.esm.js?2b0e:4851)
at Object.get [as stockPortfolio] (vuex.esm.js?2f62:671)
at VueComponent.mappedGetter (vuex.esm.js?2f62:1026)
Please find the code below along with screenshot of errors.
Purchase screenshot-enter image description here
Desired result-enter image description here
Result I'm getting-enter image description here
App.vue
<template>
<div class="container">
<app-header></app-header>
<div class="row">
<div class="col-xs-12">
<router-view></router-view>
</template>
<script>
import Header from "./components/Header.vue";
export default {
components: {
appHeader: Header,
created() {
this.$store.dispatch("initStocks");
</script>
<style>
body {
padding: 30px;
</style>
Portfolio.js
const state = {
funds: 20000,
stocks: [],
const mutations = {
BUY_STOCK(state, { stockId, quantity, stockPrice }) {
const record = state.stocks.find((element) => element.id == stockId);
if (record) {
record.quantity += quantity;
} else {
state.stocks.push({
id: stockId,
quantity: quantity,
state.funds -= stockPrice * quantity;
SELL_STOCK(state, { stockId, quantity, stockPrice }) {
const record = state.stocks.find((element) => element.id == stockId);
if (record.quantity > quantity) {
record.quantity -= quantity;
} else {
state.stocks.splice(state.indexOf(record), 1);
state.funds += stockPrice * quantity;
const actions = {
sellStock({ commit }, order) {
commit("SELL_STOCK", order);
const getters = {
stockPortfolio(state, getters) {
return state.stocks.map((stock) => {
const record = getters.stock.find((element) => element.id == stock.id);
return {
id: stock.id,
quantity: stock.qunatity,
name: record.name,
price: record.price,
funds(state) {
return state.funds;
export default {
state,
mutations,
actions,
getters,
Portfolio.vue
<template>
<app-stock
v-for="stock in stocks"
:key="stock.id"
:stock="stock"
></app-stock>
</template>
<script>
import { mapGetters } from "vuex";
import Stock from "./Stock.vue";
export default {
computed: {
...mapGetters({
stocks: "stockPortfolio",
components: {
appStock: Stock,
</script>
Kindly advise and a let me know if more info needed.
–
–
–
That specific error is coming from your stockPortfolio getter, specifically, this line:
const record = getters.stock.find((element) => element.id == stock.id);
You can't call getters.stock; you almost certainly mean to use state.stock instead.
Your stack trace can help you find these sorts of problems more quickly in the future:
vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read property 'find' of undefined
at eval (portfolio.js?9639:48)
at Array.map (<anonymous>)
at stockPortfolio (portfolio.js?9639:47)
at wrappedGetter (vuex.esm.js?2f62:881)
at Vue.eval (vuex.esm.js?2f62:140)
at Watcher.get (vue.runtime.esm.js?2b0e:4495)
at Watcher.evaluate (vue.runtime.esm.js?2b0e:4597)
at Vue.computedGetter [as stockPortfolio] (vue.runtime.esm.js?2b0e:4851)
at Object.get [as stockPortfolio] (vuex.esm.js?2f62:671)
at VueComponent.mappedGetter (vuex.esm.js?2f62:1026)
Start from the bottom, and work your way up, skip lines that don't seem to add anything. All you're looking for are clues.
at VueComponent.mappedGetter (vuex.esm.js?2f62:1026)
VueComponent.mappedGetter means the error is occurring in a mapped Vuex getter in some component
at stockPortfolio (portfolio.js?9639:47)
stockPortfolio is the direct name of the getter that's causing the error
at Array.map (<anonymous>)
The error is occurring inside the callback used by an Array.prototype.map call
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.
