Although I've searched for similar questions, I can't seem to find the right solution to my issue. I've been working on a firebase / vue.js project as a training exercise where I'm refactoring it to incorporate Vuex, http vue resource calls, and Firebase. Below is an image showing how my data is stored in Firebase.
While using v-for="stock in getStocks" in Vue.js works fine for iterating through my array, I encounter a problem when trying to access object properties directly in JavaScript code after calling my getter. It feels like there's an extra layer between the array and its values. The screenshot shows what happens when I use console.log(this.getStocks). The getStocks getter simply returns state.stocks.
I believe I may be missing a fundamental concept here, so I'm hoping someone can provide some insight. My difficulty lies in not being able to do something like const stocks = this.getStocks; followed by console.log(stocks[0].ticker) — that's where I'm getting stuck.