Question

我正在尝试从数据库中传递一个值，然后将该值分配给我的Vue Component中的变量。这样可以成功地从数据库中获取数据，但是在将该值分配给组件中的变量时出现错误：

“ TypeError：无法读取未定义的属性'data'”

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循环中，transaction是项目的数组索引，而不是项目本身。这是一个更常见的循环：

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

此循环将起作用，但仍然没有意义，因为您将仅将this.amount设置为下一个transaction的数量并覆盖最后一个。如果要添加它们，可以使用：

this.amount += transaction.amount

_{（注意：最好将其他任何循环类型用于数组，因为for ... in不能保证索引顺序。替代方法有forEach，for或for ... of）}

将值从数据库传递到vue组件并将其分配给变量

1 个答案: