Vue.js返回属性<= input.value的项目

如何解决Vue.js返回属性<= input.value的项目

实际上，在vue.js中的项目上，我正在返回对象的所有元素。
我想返回“ WHERE”以仅返回maxPeoples> = input.value的项目。

这是我的代码： 型号：
模板：

ssh -f 11.160.48.88 "sh -c 'nohup wget https://raw.githubusercontent.com/mirror/wget/master/README -O - > wgetReadme  2>&1 &'"

脚本：

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

此刻我有此错误：

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

我认为forEach就是问题所在...
谢谢。

解决方法

返回人数少于int main() { auto stream = std::stringstream{}; auto mtx = std::mutex{}; auto hasData = std::condition_variable{}; auto readingStarted = std::condition_variable{}; auto thread = std::thread{[&]() { std::unique_lock<std::mutex> lock{mtx}; readingStarted.notify_one(); hasData.wait(lock); auto str = std::string{}; stream >> str; std::cout << str; }}; { auto lock = std::unique_lock{mtx}; readingStarted.wait(lock); stream << "hello" << std::endl; hasData.notify_one(); } thread.join(); return EXIT_SUCCESS; } 的食谱列表。您应该使用计算列表。

maxPeoples

然后像这样使用它，

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

尽管我觉得您应该为<div v-for="recette in filteredRecettes" :key="recette.id"> 添加某种形式的验证，以便用户只能设置数值。像这样：

maxPeoples

,

我建议删除@keyup.enter="setMaxPeople"和v-model，因为它是双向绑定的，您不能只是从两个不同的位置（即@keyup.enter="setMaxPeople"和v-model= "maxPeoples"

）设置值>

按照最佳实践，我将其替换为

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

也只需将您的方法替换为

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

除此之外，您还可以为maxPeoples

创建一个单独的计算属性