Vue.js filters items based on their property being less than or equal to the input value

Question

Vue.js filters items based on their property being less than or equal to the input value

I'm currently working on a project in vue.js where I need to filter elements of an object based on a specific condition.
I want to only return items where maxPeoples are greater than or equal to the input value.

Below is a snippet of 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="recipe in recipes" :key="recipe.id">
        <recipe :picture="recipe.picture" :title="recipe.title" :preparation="recipe.preparation" :people="recipe.people" />
      </div>
    </div>
  </div>
</template>

script:

export default {
  name: 'App',
  data() {
    return {
      maxPeoples: '',
      recipes: [
        {
          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.recipes.filter(recipe => recipe.people >= maxPeoples);
    }
  }
}

I'm encountering an error message:

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  'recipe' is defined but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

I suspect that the forEach loop is causing the issue...
Thank you for your help.

javascript vue.js foreach vuejs2

Answer 1

Answer №1

If you want to retrieve a list of recipes where the number of people is less than maxPeoples, you can achieve this by using a computed list.

computed: {
  filteredRecipes() {
    const filtered = this.recipes.filter(recipe => recipe.people < this.maxPeoples)
    return filtered
  }
}

You can then use it in your code like this,

<div v-for="recipe in filteredRecipes" :key="recipe.id">

I recommend adding validation for the maxPeoples input to ensure that only numerical values are allowed. You can do so with the following:

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

Answer 2

If you want to retrieve a list of recipes where the number of people is less than maxPeoples, you can achieve this by using a computed list.

computed: {
  filteredRecipes() {
    const filtered = this.recipes.filter(recipe => recipe.people < this.maxPeoples)
    return filtered
  }
}

You can then use it in your code like this,

<div v-for="recipe in filteredRecipes" :key="recipe.id">

I recommend adding validation for the maxPeoples input to ensure that only numerical values are allowed. You can do so with the following:

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

Answer 3

Answer №2

My recommendation would be to eliminate the

@keyup.enter="setMaxPeople"

and v-model since it involves two-way binding where values are being set from different sources -

@keyup.enter="setMaxPeople"

and v-model= "maxPeoples"

For better practice, I suggest replacing it with

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

Further, update your method to:

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

To enhance this, you can create a separate computed property for maxPeoples

Answer 4

My recommendation would be to eliminate the

@keyup.enter="setMaxPeople"

and v-model since it involves two-way binding where values are being set from different sources -

@keyup.enter="setMaxPeople"

and v-model= "maxPeoples"

For better practice, I suggest replacing it with

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

Further, update your method to:

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

To enhance this, you can create a separate computed property for maxPeoples

Vue.js filters items based on their property being less than or equal to the input value

Answer №1

Answer №2

Similar questions

Struggling to access a PHP variable in a JavaScript file through AJAX

No assets detected in sails.js

Can you explain the distinction between "(.....);" and "{......}" within the context of React?

Tips for incrementing a number by 1 at random intervals using jQuery

The function(result) is triggered when an http.get request is made

Validation scheme for the <speak> element

iOS device encounters failure with Ajax CORS request and redirect

I am looking to consolidate my array of objects into a single object with distinct keys

Refreshing a component in React when a prop changes

Include the button beneath the Rating section using JQuery or AJAX

Is there a way to retrieve two distinct data types from a single ng-model within a select option?

Steps for transferring JSON data from the controller to JavaScript

Introducing additional choices to the list and automatically refreshing the list with the latest updates

The primary origin of TypeScript is derived from the compiled JavaScript and its corresponding source map

Enhance your website's accessibility by using JavaScript to allow the down and up arrow keys to function

Error: Unexpected token : encountered in jQuery ajax call

Who is the intended audience for the "engines" field in an npm package - consumers or developers?

Display a confirmation modal before triggering $routeChangeStart in AngularJs, similar to the window.onbeforeunload event

Hapi/Node.js Reference Error for Request: Troubleshooting the Issue

Aborting HTTP POST requests in IE due to error code 0x2ee2