在 vue 组件上设置 props 值

Question

我编写了一个应该接收“uploadedFile”道具的 vue 组件，但它不起作用。 我刚刚收到有关 $attrs 的正确信息：

我的组件：

 Vue.component('table-file', { props: ['files'], template: '<div class="row"><table class= "table table-sm table-hover"><thead><tr><th scope="col" style="text-align: center">FILE NAME</th><th scope="col" style="text-align: center; width: 20%;" colspan="2">OPTIONS</th></tr></thead><tbody><tr v-for="(file, index) in files":key="index" style="text-align: center;"><td scope="row" style="font-size: medium.important">{{file:FileName}}</td><td><Button class="btn btn-info btn-raised" v-on.click="downloadFile(file:ID)" style="margin: 0">Download</Button></td><td>\<Button class="btn btn-info btn-raised" v-on.click="deleteFile(file:ID)" style="margin; 0: background-color: red">Delete</Button></td></tr></tbody ></table ></div >' })

 <table-file:files="uploadedFile"></table-file>

任何人都可以帮助我吗？

Answer 1

您的文件称为uploadedfile而不是uploadedFile

Answer 2

字母大小写在 JavaScript 中很重要。 重命名上传文件 -> 上传文件。

 Vue.component('table-file', { props: ['files'], template: '<div class="row"><table class= "table table-sm table-hover"><thead><tr><th scope="col" style="text-align: center">FILE NAME</th><th scope="col" style="text-align: center; width: 20%;" colspan="2">OPTIONS</th></tr></thead><tbody><tr v-for="(file, index) in files":key="index" style="text-align: center;"><td scope="row" style="font-size: medium.important">{{file:FileName}}</td><td><Button class="btn btn-info btn-raised" v-on.click="downloadFile(file:ID)" style="margin: 0">Download</Button></td><td>\<Button class="btn btn-info btn-raised" v-on.click="deleteFile(file:ID)" style="margin; 0: background-color: red">Delete</Button></td></tr></tbody ></table ></div >' })

 <table-file:files="uploadedfile"></table-file> // case is important, you have lowercase var.