CODEWITHSUNDEEP
vue.js
piyush
piyush

Reputation: 33

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'find' of undefined"

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
         <Root>
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>
      </div>
    </div>
  </div>
</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>
  <div>
    <app-stock
      v-for="stock in stocks"
      :key="stock.id"
      :stock="stock"
    ></app-stock>
  </div>
</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.

Upvotes: 0

Views: 2474

Answers (1)

zcoop98
zcoop98

Reputation: 3087

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

Upvotes: 1

Related Questions