What to do when VueJs computed method throws an error: "Cannot access property 'words' of undefined"?

Question

What to do when VueJs computed method throws an error: "Cannot access property 'words' of undefined"?

Here is some pseudo code that I've written:

var vm = new Vue({
  el: '#test',
  data: {     
    words: [{name:'1'},  {name:'2'}, {name:'3'},{name:'4'},{name:'5'},{name:'6'}],
  },
  computed: {
    paginatedWords: function (words) {
      return vm.words.slice(2, 2);
    }
  }
});

I am trying to display only a section of words using v-for. Below is the corresponding HTML code:

<ul>
  <li v-for="w in paginatedWords"> @{{w.name}} </li>
</ul>

However, I keep encountering this error message in the console:

Error in render function: "TypeError: Cannot read property 'words' of undefined"

Any idea what mistake I might be making?

javascript vue.js vuejs2

Answer 1

Answer №1

When coding, remember to use this instead of vm.

paginatedWords: function () {
  return this.words.slice(2, 2);
}

It's important to note that slice(2,2) will result in an empty array since the second argument specifies where to end. Take a look at the documentation for slice.

Additionally, the words parameter is not being utilized.

var vm = new Vue({
  el: '#test',

  data: {
    words: [{
      name: '1'
    }, {
      name: '2'
    }, {
      name: '3'
    }, {
      name: '4'
    }, {
      name: '5'
    }, {
      name: '6'
    }],

  },

  computed: {
    paginatedWords: function() {
      return this.words.slice(2, 4);
    }
  }
});

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e080b1b3e4c504c5048">[email protected]</a>/dist/vue.js"></script>
<div id="test">
  <ul>
    <li v-for="w in paginatedWords"> {{w.name}} </li>
  </ul>
</div>

Answer 2

When coding, remember to use this instead of vm.

paginatedWords: function () {
  return this.words.slice(2, 2);
}

It's important to note that slice(2,2) will result in an empty array since the second argument specifies where to end. Take a look at the documentation for slice.

Additionally, the words parameter is not being utilized.

var vm = new Vue({
  el: '#test',

  data: {
    words: [{
      name: '1'
    }, {
      name: '2'
    }, {
      name: '3'
    }, {
      name: '4'
    }, {
      name: '5'
    }, {
      name: '6'
    }],

  },

  computed: {
    paginatedWords: function() {
      return this.words.slice(2, 4);
    }
  }
});

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e080b1b3e4c504c5048">[email protected]</a>/dist/vue.js"></script>
<div id="test">
  <ul>
    <li v-for="w in paginatedWords"> {{w.name}} </li>
  </ul>
</div>

What to do when VueJs computed method throws an error: "Cannot access property 'words' of undefined"?

Answer №1

Similar questions

Having trouble with prettyphoto functionality

Utilizing regular expressions for querying MongoDB

Issue with displaying nested React Elements from Component

"Unlocking the power of AngularJS translate: A step-by-step

express-session is failing to maintain persistence and refusing to transmit a cookie to the browser

Issues Arise when Attempting to Upload Files to AWS S3 Using Node.js as

Want to achieve success with your AJAX calls in JavaScript? Consider using $.get

Explaining the process of defining a function and addressing the situation of inserting "variable parameters/arguments" in case the first parameter/argument is deemed incorrect

Align the headers of columns to the right in the AgGrid widget

Node.js Axios Returns Bad Request with Status Code 400

What could be causing the Material UI tabs to malfunction when dynamically populating the content using a .map function instead of manually inserting it?

What is the process for adding an image to a scene using menu options?

Next.js React Server Components Problem - "ReactServerComponentsIssue"

Exploring the art of capturing multiple images in Vue.js

`There was an error in require.js stating that the property '$' of object #<Object> is not a function.`

Get data from a JSON file using JavaScript

top margin is functioning properly in Internet Explorer, but not in Google Chrome

Request financial data from AlphaVantage using PHP

Incorporate a dynamic fading effect for text and images using JQuery

Locating the right selector for adding a div to its parent element in jQuery