Vuejs - Component not rendering to screen

Question

I'm trying to create a vue app for budget tracking and I have a BudgetItems component that I want to render in the /budget route. All the other components and raw HTML render but this one component does not

This is the BudgetItems component:

<template>
    <div>
        <BudgetItem v-for="item in Items" v-bind:key='item.id' v-bind:Item="item" />        
    </div>
</template>

<script>
import BudgetItem from './BudgetItem'
export default {
    name: 'BudgetItems',
    components: {
        BudgetItem,
    },
    props: [
        'Items'
    ]
}
</script>

And this is the BudgetItem component I used to render a single item:

<template>
    <div class="budgetitem">
        <h1>{{item.title}}</h1>
        <h1>{{item.value}}</h1>
    </div>
</template>

<script>
export default {
    name: 'BudgetItem',
    props: [
        'Item'
    ]
}
</script>

Last of all, this is the Budget page view:

<template>
  <div class="budget">
      <Nav />
      <h1>Budget</h1>
      <BudgetItems v-bind:Items="items" />
  </div>
</template>

<script>
import Nav from "../components/Nav"
import BudgetItems from "../components/BudgetItems"
export default {
  name: 'Budget',
  components: {
    Nav,
    BudgetItems,
  },
  data(){
    return{
      items: [
        {
          id: 1,
          income: false,
          title: "Item 1",
          value: 200
        },
        {
          id: 2,
          income: true,
          title: "Item 2",
          value: 500
        },
        {
          id: 3,
          income: false,
          title: "Item 3",
          value: 10
        },
      ]
    }
  }
}
</script>

Also, when I look in the vue dev tools tab, the component appears, it just doesn't show on the screen

Answer 1

You need to change the v-bind declarations to lower case. Replace each instance of Items and Item with items and item.

Vue.JS doesn't like it if you capitalise props when using binding.

Please read this for more explanation.

Essentially, browsers treat all attribute names as lowercase. As a result, it interprets "Items" as being "items".

Budget page view:

<BudgetItems v-bind:items="items" />

BudgetItems:

<BudgetItem v-for="item in items" v-bind:key='item.id' v-bind:item="item"/>

props: [
    'items'

]

BudgetItem:

props: [
    'item'
]

Once you make these changes, it works perfectly as seen here: