CODEWITHSUNDEEP
vue.js
Pianoc
Pianoc

Reputation: 797

Vue filter by two properties in same filter

I have created a simple Vue app that I would like to filter by both the name of a city as well as the code (value). Is this possible?

I know the right way to go is using Vue computed but for some reason I just can't link this one up.

https://jsfiddle.net/ax8fer9L/

new Vue({
  el: '#app',
  data() {
    return {
      findName: '',
      options: [
        {"text":"Aberdeen","value":"ABZ"},
        {"text":"Belfast","value":"BHD"},
        {"text":"Bradford","value":"BRF"}
      ]
    }
  },
  computed: {
    filteredNames() {
      let filter = new RegExp(this.findName, 'i')
      return this.options.filter(el => el.match(filter))
    }
  }
})

Upvotes: 0

Views: 46

Answers (1)

Hazza
Hazza

Reputation: 6581

You just need to filter on the properties of your list of options. Check this fiddle: https://jsfiddle.net/zxua4r0m/

The changed code:

return this.options.filter(el => el.text.match(filter) || el.value.match(filter))

Upvotes: 1

Related Questions