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

I am attempting to arrange variables based on the key of the json nested within another json

The jQuery hide and show functions lack precision and are too indiscriminate, requiring a more targeted approach

Converting user input from a string to an object in JavaScript: a comprehensive guide

Inspecting element value on a website

``The Vue.js routing system is determined by the incoming data received

Tips for manipulating the DOM: Pushing existing elements when new ones are dynamically created with JavaScript

Using async/await to handle the callback function

When using vue-property-decorator, changes in data do not automatically generate an `emit` event

The sorting icon in jQuery Data Table's search option is not functioning

Combine two JSON objects which share a common attribute

Uncover the structure of a regular expression pattern to discover the quantity of tokens and the size of the anticipated matches

What is the best way to modify a particular value buried within a JavaScript object?

Techniques for transferring images directly into HTML canvas games

Ways to retrieve nested data from an object

Is there a way to ensure that the line numbers displayed for JavaScript errors in Chrome are accurate?

What is the best way to extract the image url from a page in WordPress?

Tips on transforming truncated surfaces into complete entities

Removing a row from a table in AngularJS connected to FireBase

Determine in JavaScript whether a character is 32-bit or not

Creating a sort button in HTML that can efficiently sort various divs within a table is a useful tool for enhancing user experience