Vue.js returns items where property <= input.value

Question

On a project in vue.js in fact I am returning all the elements of an object.
I want to return with a 'WHERE' to return only items where maxPeoples> = input.value.

Here is my code: model:
template:

<template>
  <div id="app">
    <Titre />
    <div class="flex justify-around" v-if="maxPeoples === ''">
      <input type="text" v-model="maxPeoples" placeholder="set maxPeoples" @keyup.enter="setMaxPeople">
      <div v-for="recette in recettes" :key="recette.id">
        <recette :picture="recette.picture" :title="recette.title" :preparation="recette.preparation" :people="recette.people" />
      </div>
    </div>
  </div>
</template>

script:

export default {
  name: 'App',
  data() {
    return {
      maxPeoples: '',
      recettes: [
        {
          id: 1,
          picture: 'https://picsum.photos/id/100/100/60',
          title: 'Macaronis au fromage',
          preparation: 15,
          people: 2
        },
        {
          id: 2,
          picture: 'https://picsum.photos/id/110/100/60',
          title: 'Croque-monsieur',
          preparation: 10,
          people: 1
        }
      ]
    }
  },
  methods:  {
    setMaxPeoples(maxPeoples){
      this.recettes.forEach(recette => {
        if (this.recette.people <= maxPeoples) {
          return this.recette
        }
        this.recette.people 
      })
    }
  }
}

At the moment I have this error:

Failed to compile.

./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):

C:\Users\rollivier\Desktop\Franck\dicolor\vue\test-vue\src\App.vue
  75:29  error  'recette' is defined but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

I think the forEach is the problem ...
Thank you.

Answer 1

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
      }
    }
  }
}

Answer 2

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 ie @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