title: Vue.js computed property : [Vue warn]: Error in render: "TypeError: Cannot read property 'userId' of undefined"
body: <p>I am very new to Vue.js, so please be patient with me if the problem is too simple.</p>
  <p>so I have the following code of <code>Home.vue</code>:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;home&quot;&gt;
      &lt;div&gt;
        &lt;b-table striped hover :items=&quot;borrowingHistroy&quot;&gt;&lt;/b-table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import userData from '@/data/user_data';
  
  export default {
    name: 'Home',
    data() {
      return {
        userId: 0,
      };
    },
    computed: {
      borrowingHistroy: () =&gt; userData[this.userId].borrowingHistory,
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>The code did not get rendered as I get the following error/warning:</p>
  <pre><code>[Vue warn]: Error in render: &quot;TypeError: Cannot read property 'userId' of undefined&quot;
  </code></pre>
  <p>if I change the <code>borrowingHistry</code> in the <code>computed</code> to the following then it works:</p>
  <pre><code> borrowingHistroy: () =&gt; userData[0].borrowingHistory,
  </code></pre>
  <p>so that warning must mean <code>this</code> is not defined here?</p>
  <p>But then how can I use the <code>userId</code> defined in &quot;data&quot;?</p>
  <p>****** modified ******</p>
  <p>The following are my other parts of code:</p>
  <p><code>main.js</code>:</p>
  <pre><code>import Vue from 'vue';
  import BootstrapVue from 'bootstrap-vue';
  
  import 'bootstrap/dist/css/bootstrap.css';
  import 'bootstrap-vue/dist/bootstrap-vue.css';
  
  import App from './App.vue';
  import router from './router';
  import store from './store';
  
  Vue.use(BootstrapVue);
  
  Vue.config.productionTip = false;
  
  new Vue({
    router,
    store,
    render: (h) =&gt; h(App),
  }).$mount('#app');
  </code></pre>
  <p><code>App.vue</code>:</p>
  <pre><code>&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
      &lt;img alt=&quot;Vue logo&quot; src=&quot;./assets/images/HPL.png&quot;&gt;
    &lt;div id=&quot;nav&quot;&gt;
      &lt;router-link to=&quot;/&quot;&gt;Home&lt;/router-link&gt;
    &lt;/div&gt;
    &lt;router-view /&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p><code>router/index.js</code>:</p>
  <pre><code>import Vue from 'vue';
  import VueRouter from 'vue-router';
  import Home from '../views/Home.vue';
  
  Vue.use(VueRouter);
  
  const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
  ];
  
  const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
  });
  
  export default router;
  </code></pre>
  <p><code>store/index.js</code>:</p>
  <pre><code>import Vue from 'vue';
  import Vuex from 'vuex';
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
    state: {
    },
    mutations: {
    },
    actions: {
    },
    modules: {
    },
  });
  </code></pre>