I'm current working on a project that allows the user to upload a file and then download that file clicking on my icon. So the conundrum I'm facing is as a user I would like to click the icon to download that specific file, I'm still a fairly new Jr. Web Dev. I was wondering if someone could give me direction.
I have a .find
for my array but for some reason its only displaying the first item within my array. Am I passing something through incorrectly?
My array (this.numberList) contains a rowKey which is the Id of that item eg. "rowkey": "2" and another "label": "filename" which contains the file name
I have my axios calls within a api folder but I believe you guys wont need it but I could be mistaken.
Thank you for reading!
Code
<template>
<div class="app-container">
<el-table
:data="list"
style="width: 100%"
border
stripe
highlight-current-row
tooltip-effect="dark"
>
<el-table-column type="selection" align="center" />
<el-table-column label="Id" width="50px">
<template slot-scope="{ row }">
<span class="link-type">{{ row.rowKey }}</span>
<!--A button that is connectd the the downloadFile function-->
<el-button
type="text"
size="mini"
icon="el-icon-download"
@click="whatFunction"
>
</el-button>
</template> </el-table-column
>>
<el-table-column label="File Name" width="auto">
<template slot-scope="{ row }">
<span class="link-type">{{ row.label }}</span>
</template>
</el-table-column>
<el-table-column label="Tools" width="auto">
<template slot-scope="{ row }">
<el-button type="primary" size="mini">Preview</el-button>
<el-button type="warning" size="mini">Edit</el-button>
<el-button type="danger" size="mini">Delete</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getMe } from '@/api/remote-search'
export default {
name: 'FileTable',
data() {
return {
list: [],
numberList: [],
}
},
computed: {
downloadList() {
getMe().then((response) => {
this.list = response.data
this.numberList = response.data
})
},
theListOfIdFile() {
return this.numberList.map((x) => x), rowKey
},
},
created() {
this.downloadList
},
methods: {
whatFunction() {
console.log(this.numberList.find((obj) => obj).rowKey)
},
},
}
</script>
Give a try to @click="findRow($event)
and in a method findRow(e) { console.log(e) }
to find out something that could help you identify the given specific row.
Like an id that you could then find out in your collection (numberList
array I guess).