CODEWITHSUNDEEP
javascriptvue.jsvue-component
Daniel Villar
Daniel Villar

Reputation: 191

Set props value on vue component

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:

enter image description here

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?

Upvotes: 3

Views: 236

Answers (2)

Revolist
Revolist

Reputation: 88

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.

Upvotes: 0

oemera
oemera

Reputation: 3453

Your file is called uploadedfile and not uploadedFile

Upvotes: 2

Related Questions