Vue.js Send an index with @input event

Question

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.

And I use this component vue image uploader.

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: console log

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.

But to send this index, you have to have an index, where is your index coming from? Got a v-for? If you don't create a computed property, or even a method that will dynamically issue that index, with each call it raises a value in the index so you have control. — Hamilton Gabriel
– Hamilton Gabriel, Commented Oct 26, 2019 at 12:27
Sorry, your mention seem not notifies me. Let me take a look @meti — nmfzone
– nmfzone, Commented Oct 29, 2019 at 8:55
It seems that @input takes function name, not return value of the function. Since you're calling setImage(output, index), you're actually passing return value of setImage to the @input. — nmfzone
– nmfzone, Commented Oct 29, 2019 at 9:02

nmfzone · Accepted Answer · 2019-10-29 11:08:03Z

Because you're actually passing the return value of setImage to the @input, not the method.

You can't just add extra parameters to setImage, as ImageUploader component just emit an image to the setImage. If you need to add extra parameters to that method, you need to create custom element that wrap ImageUploader.

It's something like this:

ImageUpload.vue

<template>
  <image-uploader
    :debug="0"
    :autoRotate="true"
    outputFormat="blob"
    :preview="true"
    :className="['fileinput', { 'fileinput--loaded' : hasImage }]"
    :capture="false"
    accept="image/*"
    doNotResize="['gif', 'svg']"
    @input="setImage"
    v-on="listeners" />
</template>

<script>
export default {
  props: {
    index: {
      required: true,
      type: Number
    }
  },
  data() {
    return {
      hasImage: false,
      image: null
    };
  },
  computed: {
    listeners() {
      const listeners = { ...this.$listeners };

      const customs = ["input"];

      customs.forEach(name => {
        if (listeners.hasOwnProperty(name)) {
          delete listeners[name];
        }
      });

      return listeners;
    }
  },
  methods: {
    setImage(image) {
      this.hasImage = true;
      this.image = image;

      this.$emit("input", this.index, image); // here, we emit two params, as index for the first argument, and the image at the second argument
    }
  }
};
</script>

Then, you can use that component something like this:

<template>
  <div class="container">
    <div v-for="(line, index) in lines" :key="index">
      <image-upload :index="index" @input="setImage"/>
    </div>
  </div>
</template>

<script>
import ImageUpload from "./ImageUpload";

export default {
  components: {
    ImageUpload
  },
  data() {
    return {
      lines: ["1", "2", "3", "4"]
    };
  },
  methods: {
    setImage(index, image) {
      console.log("Result", index, image);
    }
  }
};
</script>

See the working example: https://codesandbox.io/s/vue-template-ccn0e

Is it working @meti? Atleast add a comment to confirm if it's working or not.

Nick Steele · Accepted Answer · 2022-06-11 21:05:00Z

2

Just use $event like this...

@input="setImage($event, index)"

...and you're done!

answered Jun 11, 2022 at 21:05

Nick Steele

8,1824 gold badges39 silver badges39 bronze badges

Collectives™ on Stack Overflow

Vue.js Send an index with @input event

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related