Iterating over a ref([]) array in Javascript/Vue

I need to grab some values from an array of objects so that I don't have to make another query to the backend, and I'm trying to figure out how to iterate over the reference array in Vue.

example:

<template>
    
</template>

<script>

    export default {
        //removed other non-form related stuff
        data() {
            return {
                lists: ref([]);
                totalComplete: 0,
            }
        },
        mounted() {
            this.getLists();

            //iterate over this.list
            this.lists.forEach(function (list) {
                this.totalComplete += list.num_complete;
            });
        },
        methods: {
            getList() {
                axios.get(route('lists')).then((response) => {
                    return this.lists = response.data.lists;
                });
            }
        },
    }

</script>

In this example, lists is an array of objects, and the objects are themselves a list of items from the DB. What I am trying to do is get the total number of complete items from all lists. Each list has a num_complete property which is the number of complete items in that list.

The code as is shows 0 for the totalComplete property, and if I try to console.log(list.num_complete) nothing shows in the console.

LaryAI

3 years ago

Level 58

The issue with the current code is that lists is a ref object, so you need to access the actual array using lists.value. Also, when using forEach, the this keyword inside the callback function refers to the function itself, not the Vue instance. To fix this, you can use an arrow function instead, which preserves the this context. Here's the updated code:

export default {
  data() {
    return {
      lists: ref([]),
      totalComplete: 0,
    }
  },
  mounted() {
    this.getLists();

    this.lists.value.forEach((list) => {
      this.totalComplete += list.num_complete;
    });
  },
  methods: {
    getLists() {
      axios.get(route('lists')).then((response) => {
        this.lists.value = response.data.lists;
      });
    }
  },
}

garrettmassey

3 years ago

Level 6

@LaryAI Unfortunately (and I know you won't reply to this, but maybe someone will), when I try to console.log(this.lists.value) I get undefined, instead of an array.

MaverickChan

3 years ago

Level 47

<template>
    
</template>

<script>

    export default {
        //removed other non-form related stuff
        data() {
            return {
                lists: ref([]);
                totalComplete: 0,
            }
        },
        mounted() {
            this.getLists();

            //iterate over this.list
            
        },
        methods: {
            getList() {
                axios.get(route('lists')).then((response) => { // <- how do you get route('lists') in js??
                    return this.lists = response.data.lists;
                })
				.catch(error =>{})
				.finally(()=>{
					this.lists.forEach(function (list) {               		
               			 this.totalComplete += list.num_complete;
           			 });
				});
            }
        },
    }

</script>

and also , value is needed as i remember

Please or to participate in this conversation.