Передача значения из базы данных в компонент vue и присвоение его переменной

Question

Я пытаюсь передать значение из моей базы данных, а затем присвоить это значение переменной в моем Vue Component. Это успешно получает данные из базы данных, однако я получаю сообщение об ошибке при назначении этого значения переменной в компоненте:

• "Ошибка типа: невозможно прочитать свойство 'data' of undefined"

Vue Компонент:

import TransactionsService from '@/services/TransactionsService'
export default {
    components: {
    },
    data(){
        return {
            transactions: null,
            product: null,
            amount: null
        }
    },
    async mounted() {
        try{
        this.transactions = (await TransactionsService.index()).data.transactions

        for( transaction in transactions){
            this.amount = transaction.amount
        }
        console.log(amount)

        this.userId = this.$store.state.user.priviledge
        } catch(error){
            this.error = error.response.data.message
        }      
    }
}

Я хочу присвоить значение в transaction.amount переменной amount

Answer 1

При этом for ... in l oop, transaction - это индекс массива элемента, а не сам элемент. Вот более распространенный l oop:

// forEach
transactions.forEach(transaction => {
   this.amount = transaction.amount 
})

Этот l oop будет работать, но все еще не имеет смысла, потому что вы будете продолжать устанавливать this.amount на следующую transaction сумму и перезаписывая последний. Если вы намеревались добавить их, вы можете использовать:

this.amount += transaction.amount 

_{(Примечание. Рекомендуется использовать любой другой тип l oop с массивами, поскольку порядок индекса не гарантируется при использовании for ... in. Альтернативы forEach, for или for ... of)}