CODEWITHSUNDEEP
javascriptvue.js
softcode
softcode

Reputation: 4668

Accessing inputnum in <input inputnum="1"/>

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

Upvotes: 0

Views: 90

Answers (2)

Joe Allen
Joe Allen

Reputation: 123

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

Upvotes: 0

Bekim Bacaj
Bekim Bacaj

Reputation: 5955

that would be 

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

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

Upvotes: 1

Related Questions