반응형
vuex 함수 - 개체 값을 기준으로 true 또는 false를 반환합니다.
나는 아래와 같은 어린이 객체를 반환하는 데이터를 가지고 있습니다.this.children
다음과 같이 반환됩니다.
{
"1": {
"firstName": "JJJ",
"lastName": "B",
"day": "1",
"month": "1",
"year": 2012,
"name": "JJJ B",
"dateOfBirth": "2012-01-01",
"age": 6,
"id": "1"
},
"2": {
"firstName": "KKK",
"lastName": "B",
"day": "2",
"month": "2",
"year": 2004,
"name": "KKK B",
"dateOfBirth": "2004-02-02",
"age": 14,
"id": "2"
},
"3": {
"firstName": "LLL",
"lastName": "B",
"day": "3",
"month": "3",
"year": 2017,
"name": "LLL B",
"dateOfBirth": "2017-03-03",
"age": 1,
"id": "3"
}
}
저는 목록에 있는 아이의 나이가 3세 미만이면 true 또는 false를 반환하는 함수를 만들고 싶습니다.저는 vue가 꽤 생소합니다.v-for를 사용할 때 사용 기간을 검색하는 방법은 이해하지만 개체 값 확인과 관련된 vue 함수를 진행하는 방법은 잘 모르겠습니다.
그냥 해요
<ul v-for="child in getChildrenUnder3 "><li>{{child.age<3}}</li></ul>
또는 계산된 속성을 사용할 수 있습니다.
computed:{
getChildrenUnder3(){
let children3=[];
for(let i=0;i<Object.keys(this.childList).length;i++){
if(Object.values(this.childList)[i].age<3){
children3.push(Object.values(this.childList)[i])
}
}
return children3;
}
}
and render it like that :
<ul v-for="child in getChildrenUnder3 "><li>{{child.age}}</li></ul>
just put the function inside the template
<template>
<div v-for="child in children" :key="child.id">
{{child.firstName}} is less than three: {{child.age < 3 ? 'TRUE' : 'FALSE'}}
</div>
</template>
If you however, are trying to find out if every child is less than 3, you can use a computed value to retrieve this data
그minAge
발견된 최저 연령을 반환해야 합니다.
computed: {
minAge() {
return Math.min(Object.keys(this.children).map(k => {
this.children[k].age;
}))
}
}
그런 다음 이를 사용하여 템플릿에 부울을 생성할 수 있습니다.{{minAge<3}}
ReferenceURL : https://stackoverflow.com/questions/52170154/vuex-function-returns-true-or-false-based-on-object-value
반응형
'programing' 카테고리의 다른 글
Spring Boot 테스트에 게시할 JSON 개체 생성 (0) | 2023.06.27 |
---|---|
MongoDB를 사용하여 노드에 일부 작은(1MB 미만) 파일 저장그리드FS 미포함 JS (0) | 2023.06.27 |
NumPy 배열에서 가장 빈도가 높은 숫자 찾기 (0) | 2023.06.27 |
Oracle용 파일 또는 어셈블리를 로드할 수 없습니다..NET의 데이터 액세스 (0) | 2023.06.27 |
홈브루로 이미지 매직을 설치하려면 어떻게 해야 합니까? (0) | 2023.06.22 |