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不喜欢它。

请read this以获取更多说明。

本质上，浏览器将所有属性名称都视为小写。结果，它将“项目”解释为“项目”。

预算页面视图：

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

预算项目：

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

props: [
    'items'

]

预算项目：

props: [
    'item'
]

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

Vuejs-组件未呈现到屏幕

1 个答案: