javascript - 在 v-for 循环中获取值到 vuejs 中的方法

标签 javascript vue.js

<分区>

<form method="post" action="#" enctype="multipart/form-data">
<div class="row">
    <div class="col-md-12">
       <div class="image-upload" v-for="(item, index) in uploadVal" :key="item._id">
          <label class="btn btn-sm btn-success">
              <a-icon type="upload" />Upload
              <input
                type="file"
                ref="file"
                accept="image/*"
                @change="handleClickUpload"
                style="display: none;"
              />
        </label>
        <div class="show-img">
            <img :src="getImageURL(item.url)" />
        </div>
       </div>
    </div>
</div>
</form>

在方法中:

methods: {
   handleClickUpload(e) {
      console.log(e.target.files);
   },
}

我正在用 vuejs 上传图片。我想在方法的 handleClickUpload 下获取 v-for 循环的 index 值。有什么方法可以在 handleClickUpload 中获取 index 吗?请给我想法。谢谢

最佳答案

您可以向它传递一个函数,并在外部传递 eventindex,如下所示:

<input
  type="file"
  ref="file"
  accept="image/*"
  @change="(e) => handleClickUpload(e, index)"
  style="display: none"
/>

现场演示

Codesandbox Demo

并获取函数 handleClickUpload 中的索引:

handleClickUpload(e, i) {
  console.log(e.target.files);
  console.log(i);
},

关于javascript - 在 v-for 循环中获取值到 vuejs 中的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70324994/

相关文章:

javascript - 支持着色和纹理的 GLSL 着色器

javascript - Express.js - 在同一页面上发送警报作为响应

javascript - 捕获 KeyCode 时出现键盘错误声音

javascript - VueJS 响应式日期对象

javascript - Javascript concat() 方法中第一个参数的用途是什么?

javascript - 浏览器原生 JSON 支持 (window.JSON)

javascript - Vue,将值放入数组的条件

javascript - 如何让 Nuxt-auth 和 Nuxt-i18n 成为 friend

typescript - 如何在 Vue Router v4 中为自定义元字段声明 TypeScript 类型接口(interface)?

javascript - 在外部选项卡 url 应用程序中访问 Teams session 和其他信息