Send an index with @input

[MmKargar]

Vue version : 3.1.1

Hey guys,

I'm working with dynamic Creation Component, which means a user can add whatever of component he wants.I create it base on this documentation dynamic component creation.

I need to send an index when the user wants to upload the image, like this :

<div v-for="(line, index) in lines" v-bind:key="index">
{{index}}//if i log the index its 0,1,2,3 and its ok
...
          <image-uploader
            :preview="true"
            :class-name="['fileinput', { 'fileinput--loaded': line.hasImage }]"
            :capture="false"
            :debug="0"
            :auto-rotate="true"
            output-format="blob"
            accept="image/*"
            @input="setImage(output , index)"
            :ref="'fileUpload'+index"
          >
...

And the setImage funciton :

    setImage: function(output,index) {
      console.log(index);
      console.log(output);
      return ;
      this.lines[index].hasImage = true;
      this.lines[index].image = output;
      let formData = new FormData();
      formData.append("file", output);
      Ax.post(upload_route, formData, {
        headers: { "Content-Type": "multipart/form-data" }
      })
        .then(response => {
          // upload successful
        })
        .catch(error => console.log(error));
    }

And the log result is:

The index always is 0 :(

How can i send an index when i want to upload it?

I read this passing event and index and test it but it's not working on component. Because This is a custom event not a DOM event.

What should I do?

Thanks.

[MmKargar]

Solved , just need to use :id prop to use specifiec id.