K-upload component not working with multiple instances (inside grid row)

Hello,

Does anybody use component inside a grid? I mean multiple instances of in the same vue plugin component (for every row).
I couldn’t make it work, because of “this.$refs” reference which is unique. I think this could be resolved internally by using self element reference into event (e).

Thank you!

<template v-for="(carsmodel, id) in carsmodels">
        <tr :key="id">
        <td>
          <k-button @click="upload(carsmodel.id)" icon="upload" >Upload</k-button>
          <k-upload @success="onSuccess($event)" :ref="uploadFieldName+carsmodel.id" v-bind:id="uploadFieldName+carsmodel.id" />
        </td>
      </tr>
</template>

js:

export default {
  data () {
    return {
      uploadFieldName: 'photos'
    }
  },
  upload(carid) {
    let filedid = this.uploadFieldName+carid;
    this.$refs[filedid][0].open({
      url: this.$urls.api + "/cars/uploadimage"
    });
  },
  onSuccess() {
    this.$store.dispatch("notification/success", "The files have been uploaded");
  },
};

this.$refs[filedid][0] is the object reference to the open() function linked by it. If someone find a better way to access it, please respond. :innocent:

That’s what I have so far. It’s not optimal, but I couldn’t find a better solution to this problem. :cold_face: