Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I have created a button that adds file inputs, and would like to display thumbnails for each input.

However I am having issues accessing the custom binding :inputnum on the input.

When I console.log(event.target) (see arrow), I get

<input data-v-0e14f7d0 inputnum="1" type="file">

Which is expected, however, console.log(event.target.inputnum) returns undefined.

How do I access inputnum on the input?

Is there a simpler approach to this?

<template>
  <div>
    <button @click="addUploader">Add Image</button>
    <div v-for="n in count" :key="n">
      <input :inputnum="n" type="file" @change="updateThumbnail">
      <img :src="images[n]">
    </div>
    <button @click="submitImages">Submit Images</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0,
      images: {}
    }
  },
  methods: {
    addUploader() {
      this.count++
    },
    updateThumbnail(event) {
      console.log(event.target)     <-------------------------
      const imgFile = event.srcElement.files[0]

      var reader = new FileReader();

      reader.readAsDataURL(imgFile);
      reader.onload = () => {
        this.images[event.target.inputnum] = reader.result
      }
    }
  }
}
share|improve this question
up vote 1 down vote accepted

that would be

console.log(event.target.getAttribute('inputnum'));
>> "1"

that is: by using the getAttribute method of the element.

share|improve this answer

Have you tried console.log(event.target.value)?

share|improve this answer
    
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – AJT_82 yesterday

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.