Vuejs - 组件未呈现到屏幕

Question

我正在尝试创建一个用于预算跟踪的 vue 应用程序，并且我有一个 BudgetItems 组件，我想在 /budget 路由中呈现它。所有其他组件和原始 HTML 呈现，但这个组件没有

这是 BudgetItems 组件：

<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>

这是我用来渲染单个项目的 BudgetItem 组件：

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

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

最后，这是预算页面视图：

<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>

另外，当我查看 vue 开发工具选项卡时，该组件出现了，它只是没有显示在屏幕上

Answer 1

您需要将v-bind 声明更改为小写。将Items 和Item 的每个实例替换为items 和item。

Vue.JS 不喜欢在使用绑定时将 props 大写。

更多解释请read this。

本质上，浏览器将所有属性名称都视为小写。因此，它将“Items”解释为“items”。

预算页面浏​​览量：

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

预算项目：

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

props: [
    'items'

]

预算项目：

props: [
    'item'
]

进行这些更改后，它会完美运行，如下所示：