programing

vuex 함수 - 개체 값을 기준으로 true 또는 false를 반환합니다.

padding 2023. 6. 27. 21:50
반응형

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

반응형