Vuejs 遍历一个 ref 对象

Question

我有一个小问题， 我从那个方法中得到了我的 ref 对象

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

我想使用另一种方法来使用该 ref 对象：

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

但我无法遍历：

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

有没有办法让它工作？

谢谢你:)

Answer 1

由于响应是一个对象而不是一个数组，你不能用forEach对其进行迭代，你需要使用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');

我会使用响应式对象：

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

当然，如果您希望该计数也具有反应性，则需要使用计算属性。