How can I get the value from this multiple array object with VueJs-CodePudding

Hi I have multidimensional array that it has a value but I do not know how to get it, my array is this:

  0: [{total_collection: 537600, date: "2022-03-01"}, {total_collection: 260700, date: "2022-03-02"},…]
  1: [{total_collection: 349300, date: "2022-03-01"}, {total_collection: 321300, date: "2022-03-02"},…]

If I store that data into a variable called this.total_values then I do this

 {{ total_values[0][1] }}

and it displays:

 {total_collection: 537600, date: "2022-03-01"}

If you see I could do this:

 {{  total_values[0][1].total_collection }}

And it should return 537600 but it does not work it returns:

Error in render: "TypeError: Cannot read properties of undefined (reading 'total_collection')"

Why? How can I fix it? Thanks!

CodePudding user response：

The posted code works: see this playground. Your problem is elsewhere.

<script setup>
import { ref } from 'vue'
const array = ref([
  [{total_collection: 537600, date: "2022-03-01"}, {total_collection: 260700, date: "2022-03-02"}],
  [{total_collection: 349300, date: "2022-03-01"}, {total_collection: 321300, date: "2022-03-02"}]
])
</script>
<template>
  {{array[0][1].total_collection}}
</template>

CodePudding user response：

Do you get your data from API or do you send data to this component using props? if you use these things you will get undefined it's because the array doesn't have a value when you want to get value. you have to wait to data be assigned to the array. you can use this to fix the problem. test with this code:

<template v-if="total_values && total_values.length > 0">
    {{  total_values[0][1].total_collection }} 
</template>