[Vuejs]-Vue.js returns items where property <= input.value

by

0👍

✅

To return a list of recettes where people are less than maxPeoples. You should use a computed list.

computed: {
  filteredRecettes() {
    const filtered = this.recettes.filter(recette => recette.people < this.maxPeoples)
    return filtered
  }
}

Then use it like this,

<div v-for="recette in filteredRecettes" :key="recette.id">

although I feel you should add some sort of validation for maxPeoples so the user can only set numerical values. Something like this:

data() {
  return {
    _maxPeoples: ''
  }
},
computed: {
  maxPeople: {
    get() {
      return this._maxPeoples
    },
    set(value) {
      if (validate(value)) {
        this._maxPeoples = value
      }
    }
  }
}

0👍

I would suggest removing the @keyup.enter="setMaxPeople" and v-model because its two way binding and you cannot just be setting values from two different places i-e @keyup.enter="setMaxPeople" and v-model= "maxPeoples"

As best practice I would just replace it with

<input 
type="text" 
:value="maxPeoples" 
@input="setMaxPeoples()" 
placeholder="set maxPeoples">

Also just replace your method with

setMaxPeoples(){
    this.maxPeoples = event.target.value
     this.recettes.forEach(recette => {
        if (recette.people <= this.maxPeoples) {
        // console.log(recette.people)
          return recette.people
        } else return false
      })
    }

In addition to this you can also just create a separate computed property for maxPeoples

Leave a comment