функция vuex - возвращает true или false в зависимости от значения объекта

Question

У меня есть данные, которые возвращают дочерний объект, как показано ниже, поэтому 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"
    }
  }

Я хочу создать функцию, которая возвращает true или false, если возраст ребенка в этом списке меньше 3. Я довольно плохо знаком с vue. Я понимаю, как узнать возраст, когда я использую v-for, но не уверен, что делать с функцией vue, когда она включает проверку значения объекта.

Любая помощь приветствуется.

Answer 1

Просто сделай

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

и сделайте так:

<ul v-for="child in getChildrenUnder3 "><li>{{child.age}}</li></ul>

Answer 2

просто поместите функцию внутри шаблона

<template>
  <div v-for="child in children" :key="child.id"> 
    {{child.firstName}} is less than three: {{child.age < 3 ? 'TRUE' : 'FALSE'}}
  </div>
</template>

Если вы, однако, пытаетесь выяснить, не меньше ли каждого ребенка младше 3 лет, вы можете использовать вычисленное значение для получения этих данных

minAge должен возвращать самый низкий найденный возраст

computed: {
  minAge() {
    return Math.min(Object.keys(this.children).map(k => {
      this.children[k].age;
    }))
  }
}

тогда вы можете использовать это для генерации логического значения в вашем шаблоне, как это {{minAge<3}}