javascript - VueJS可以多个元素调用同一个方法

Question

我有一个包含动态元素的表单，因此有时可能有 5 个文件上传元素，有时只有 1 个。

但是我想知道在vue上让多个元素使用相同的方法是否可以？

例如:

<input type="file" @change="processImage(row.id)" name="img_1"class="img_upload_1">
<input type="file" @change="processImage(row.id)" name="img_2"class="img_upload_2">
<input type="file" @change="processImage(row.id)" name="img_3"class="img_upload_3">

然后在我的 vueJS 文件中，该方法如下所示:

processImage(index) {
      var rowIndex = this.rows.map(item => item.id).indexOf(index);
      this.rows[rowIndex].img = $('.img_upload_' + index)[0].files[0];
    },

一切正常，我只是想问是否有一些不同的方法被认为是最佳实践。

谢谢

Answer 1

可以从多个元素调用相同的方法。根据我的经验，它主要发生在 v-for 循环内。

我没有足够的关于您的案例的信息，但您可以考虑使用 HTML5 input，它允许您上传多个文件:

<input type="file" name="img" multiple>