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

Posted 2023-02-23

【中文标题】将值从数据库传递到 vue 组件并将其分配给变量

【英文标题】：Passing a value from database to vue component and assigning it to a variable

【发布时间】：2020-08-05 23:17:42

【问题描述】：

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

“TypeError：无法读取未定义的属性‘数据’”

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

【问题讨论】：

TransactionsService.index()的返回数据结构是什么

@AndrewNolan 一个数组。我已将其添加到问题中

在通往transactions的路径中似乎不是data

这很奇怪，因为我在我的 html 部分使用transactions，而我使用v-for 来访问和显示这些值。所以我不确定为什么我现在在尝试将其分配给变量时为transactions 收到此错误

我把它改成了console.log(error)，现在说transaction没有定义

【参考方案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）子>}