javascript - 在Vue中使用props时数组元素属性未定义

Question

我正在尝试在 Vue 中使用 Prop 将数组传递给子组件。不知何故，我能够访问所有变量及其属性，除了其中一个，maxAmt。我听说这可能是由于我们使用 camelCase 与 camel-case 的方式，但是在更改变量属性名称后，没有任何效果。这是我的代码：

编辑：只是为了澄清，我能够访问并显示maxAmt在父组件中，但不能在子组件中。

父组件：

<script>
import database from '../firebase.js'
export default {
  
  data(){
    return{
      grantsList:[]
    }
  },
  methods:{
    fetchItems:function(){
      database.collection('Grants').get().then((querySnapShot)=>{
        querySnapShot.forEach(doc=>{
            let grant={}
            doc=doc.data()
            grant.name=doc.Name
            grant.grantInfo = doc.GrantInfo
            grant.maxamt = doc.maxAmt // PROBLEM VARIABLE
            grant.grantAmount = doc.GrantAmount
            grant.detail = doc.Detail
            grant.apply = doc.Apply
            console.log(grant)
            //console.log(grant.maxAmt)
            grant.show=false
            this.grantsList.push(grant)      
        })
      })
    },
    open:function(link){
      window.open(link)
    }
    },
    created(){
    this.fetchItems()
    
  }  
}
</script>

子组件：

<script>
export default {
    props:{
        grantsList:{
            Type:Array
        }
    },
    data(){
        return {
            x: 0
        }
    },
    methods: {
        getTotal(){
            var sum = 'hi'
            this.grantsList.forEach(g => {
                //console.log(g.amount) // correct output
                console.log(g.maxamt) // THIS PART IS UNDEFINED
                sum += g.amount
            });
            console.log(sum)
            this.x = sum
        }
    },
}
</script>

使用console.log(g.maxamt)，我明白undefined了，但是其他变量以某种方式显示，所以我真的很困惑只有一个属性是如何无法显示的。

标签： javascriptfirebasevue.jsgoogle-cloud-firestore