[英]Vue.js returns items where property <= input.value
On a project in vue.js in fact I am returning all the elements of an object.实际上,在 vue.js 中的一个项目中,我正在返回一个对象的所有元素。
I want to return with a 'WHERE' to return only items where maxPeoples> = input.value.我想用“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 ...我认为 forEach 是问题......
Thank you.谢谢你。
To return a list of recettes where people are less than maxPeoples
.返回人数少于
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.尽管我觉得您应该为
maxPeoples
添加某种验证,以便用户只能设置数值。 Something like this:像这样的东西:
data() {
return {
_maxPeoples: ''
}
},
computed: {
maxPeople: {
get() {
return this._maxPeoples
},
set(value) {
if (validate(value)) {
this._maxPeoples = value
}
}
}
}
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"
我建议删除
@keyup.enter="setMaxPeople"
和v-model
因为它是双向绑定,你不能只是从两个不同的地方设置值,即@keyup.enter="setMaxPeople"
和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
除此之外,您还可以为
maxPeoples
创建一个单独的计算属性
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.