Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

165
Views
Vuejs Iterate through a ref object

I have a small problem, I get my ref object from that method

const dataAnimals = ref([])
function getDataAnimals() {
  axios.get('/json/data_animal.json').then((response) => {
    dataAnimals.value = response.data
  })
}
getDataAnimals()

And i want to use another method using that ref object :

function countAnimal(type) {
  dataAnimals.forEach((item) => {
    if (animal.animal == type) {
      total_hen += dataMint.value[animal.template_id]
    }
    return total_hen
  })
}
const totalHen = countAnimal('hen')

But i can't iterate through :

dataAnimals.value.forEach((item) => {

Is there anyway to make that work ?

Thank you :)

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

As the response is an object and not an array, you cannot iterate over it with forEach, you need to use Object.entries()

function countAnimal(type) {
    let total = 0;
    for (const [key, item] of Object.entries(dataAnimals)) {
        if (item.animal === type)  {
            total++;
        }
    }
    return total;
}
const totalHen = countAnimal('hen');

And I would use a reactive object:

const dataAnimals = ref(null);
function getDataAnimals() {
    axios.get('/json/data_animal.json').then((response) => {
        dataAnimals.value = response.data
    });
}
getDataAnimals()

Of course if you want that count to be reactive as well you'd need to use a computed property.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!