Implementing Vue method to apply filter criteria on an array for efficient data filtering

Question

Implementing Vue method to apply filter criteria on an array for efficient data filtering

Having trouble filtering listItems by filterCriteria before rendering.
The issue arises when attempting to pass the filterCriteria into the filter function using Array.prototype.filter.
Is there a more efficient method of passing it without having to create a new function?
Thank you!

javascript filter vue.js arguments

Answer 1

Answer №1

...struggling to pass the filterCriteria into the filter function. Is there any way to do it efficiently without having to create a new function?

A solution is available. Firstly, you can use an arrow function for the callback:

filtered () {
  return this.items.filter(item => item.status === this.query)
}

Alternatively, you can retain a reference to the this object:

filtered () {
  var vm = this
  return this.items.filter(function (item) {
    item.status === vm.query
  })
}

Here is a complete example:

var todoList = new Vue({
  el: '#todolist',
  data: {
    query: 'Done',
    items: [
      {content: 'Fishing.', status: 'Done'},
      {content: 'Do homework.', status: 'Ongoing'}
    ]
  },
  computed: {
    filtered () {
      return this.items.filter(item => item.status === this.query)
    }
  }
})

<div id="todolist">
  <div>
    <button @click="query='Ongoing'">Ongoing</button>
    <button @click="query='Done'">Done</button>
  </div>
  <div v-for="item, idx in filtered" :key="idx">
    <span>{{item.status}}:</span>
    <span>{{item.content}}</span>
  </div>
</div>

<script src="https://unpkg.com/vue"></script>

Answer 2

...struggling to pass the filterCriteria into the filter function. Is there any way to do it efficiently without having to create a new function?

A solution is available. Firstly, you can use an arrow function for the callback:

filtered () {
  return this.items.filter(item => item.status === this.query)
}

Alternatively, you can retain a reference to the this object:

filtered () {
  var vm = this
  return this.items.filter(function (item) {
    item.status === vm.query
  })
}

Here is a complete example:

var todoList = new Vue({
  el: '#todolist',
  data: {
    query: 'Done',
    items: [
      {content: 'Fishing.', status: 'Done'},
      {content: 'Do homework.', status: 'Ongoing'}
    ]
  },
  computed: {
    filtered () {
      return this.items.filter(item => item.status === this.query)
    }
  }
})

<div id="todolist">
  <div>
    <button @click="query='Ongoing'">Ongoing</button>
    <button @click="query='Done'">Done</button>
  </div>
  <div v-for="item, idx in filtered" :key="idx">
    <span>{{item.status}}:</span>
    <span>{{item.content}}</span>
  </div>
</div>

<script src="https://unpkg.com/vue"></script>

Implementing Vue method to apply filter criteria on an array for efficient data filtering

Answer №1

Similar questions

Prevent redundant Webpack chunk creation

Guide on Generating SAS Token for Azure Table Storage in a jQuery Application

Vue's keydown event will only fire when elements are in an active state

Why is it important to incorporate an inner function in order to return to the outer function?

Is there a way to calculate the word frequency in my text using plain JavaScript?

When an if statement is triggered by an overload of information, it initiates the start of a fresh

I'm encountering an error in my routes index.js file that says "Module not found"

transform array elements into an object

Signing in using Passport.js with mongoDB authentication

What will occur if I invoke response.end in Node.js while asynchronous I/O operations and callbacks are still executing?

I have encountered a node.js error related to the 'Require Stack'

Create a minimalist Vue table design that enforces a maximum of 2 or 3 columns within

Check to see if the menu item exceeds the allotted space, and if so, display the mobile menu

Retrieve Data from Form Using PHP and Ajax

function to draw a table row in JavaScript with eloquent and descriptive arguments

How to send and download files using Express.js and React on the client side

The Google Maps JavaScript API is displaying a map of China instead of the intended location

Unable to invoke requestPointerLock() function within Vue.js component

Techniques for dynamically counting rows in a table using JavaScript

Utilizing Anglar 16's MatTable trackBy feature on FormGroup for identifying unaltered fields