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 >
    <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 >{{ 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 >{{ 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>

CodePudding user response：

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).