Set props value on vue component

Question

I've write a vue component that is supposed to receive the "uploadedFile" prop, but its not working. I'm just receiving the correct information on the $attrs:

My component:

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>

Can anyone helps me?

can you share parent component code

Nilesh Patel
– Nilesh Patel

2020-12-23 16:57:58 +00:00
Commented Dec 23, 2020 at 16:57 — Nilesh Patel
– Nilesh Patel, Commented Dec 23, 2020 at 16:57

oemera · Accepted Answer · 2020-12-23 17:44:26Z

2

Your file is called uploadedfile and not uploadedFile

answered Dec 23, 2020 at 17:44

oemera

3,4933 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Revolist · Accepted Answer · 2020-12-24 01:59:50Z

Letter case is important in JavaScript. Rename uploadedFile -> uploadedfile.

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.

Collectives™ on Stack Overflow

Set props value on vue component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related