javascript - 访问 <input inputnum ="1"/> 中的 inputnum

Question

我创建了一个添加文件输入的按钮，并希望显示每个输入的缩略图。

但是我在访问自定义绑定(bind)时遇到问题 :inputnum关于input 。

当我 console.log(event.target) (见箭头)，我明白

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

然而，这是预期的，console.log(event.target.inputnum)返回未定义。

如何访问inputnum在输入上？

有没有更简单的方法？

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

Answer 1

那就是

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

即:通过使用元素的getAttribute方法。