File upload 文件上载仅适用于v-for中的第一个组件

我有一个组件，它使用

v-for

来显示打开的作业列表，在该组件中有一个FileUpload组件，它也被添加到每个列表中。由于某些原因，只有列表中的第一个作业才会实际上载文件

提交文件时，第一个响应是包含所有正确数据的json，所有其他列表的响应都是

true

我还注意到请求负载中存在差异

第一个清单的请求有效负载：

------WebKitFormBoundaryYRQqeeEwyNhW5hPy
Content-Disposition: form-data; name="files"; filename="test resume.pdf"
Content-Type: application/pdf

其他清单的请求有效负载：

------WebKitFormBoundaryCwisfY5DcuxtoI7G
Content-Disposition: form-data; name="files"

null

以下是组件（使用Vuetify构建） 主要组成部分：

<template>
  <div id="careers-page" >
    <v-container>
      <v-layout row>
        <v-expansion-panel>
          <v-expansion-panel-content  v-for="job in jobs" :key="job._id">
            <div slot="header">
              <span>{{ job.Position }}</span>
            </div>
            <v-card>
              <v-layout row wrap>
                <v-flex xs12 md6>
                  <v-card-text>{{ job.Description }}</v-card-text>
                </v-flex>
                <v-flex xs12 md6>
                  <v-form v-model="valid" ref="form" lazy-validation>
                    <v-layout row>
                      <v-flex xs10 offset-xs1>
                        <v-text-field label="Name" v-model="form.name" />
                      </v-flex>
                    </v-layout>
                    <v-layout row>
                      <v-flex xs10 offset-xs1>
                        <v-text-field label="Email" v-model="form.email" />
                      </v-flex>
                    </v-layout>
                    <v-layout row>
                      <v-flex xs10 offset-xs1>
                        <v-text-field label="Phone" v-model="form.phone" />
                      </v-flex>
                    </v-layout>
                    <v-layout row>
                      <v-flex xs10 offset-xs1>
                        <v-text-field multi-line label="Cover Letter" v-model="form.coverLetter" />
                      </v-flex>
                    </v-layout>
                      <v-layout row wrap align-center>
                        <v-flex xs12 sm4 text-xs-center text-sm-right>
                          <v-btn class="anm-btn bold" @click="submit(job.Position, job._id)" color="ANMsecondary" dark depressed>Submit</v-btn>
                        </v-flex>
                        <v-flex xs12 sm4 text-xs-center text-sm-left>
                          <FileUpload :job="job" ref="uploadFile" />
                        </v-flex>
                      </v-layout>
                  </v-form>
                </v-flex>
              </v-layout>
            </v-card>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import FileUpload from './FileUpload'

export default {
  components: {
    FileUpload
  },
  data () {
    return {
      form: {
        name: null,
        email: null,
        phone: null,
        coverLetter: ''
      },
      valid: true
    }
  },
  computed: {
    ...mapGetters({
      jobs: 'jobs'
    })
  },
  methods: {
    submit (position, jobId) {
      if (this.$refs.form[0].validate()) {
        this.$store.dispatch('submitApplication', {
          Name: this.form.name,
          Email: this.form.email,
          Phone: this.form.phone,
          Position: position,
          CoverLetter: this.form.coverLetter
        })
        .then((res) => {
          this.$refs.uploadFile[0].submitFile(res.data.id)
        })
        .catch((err) => {
          console.log(err)
        })
      }
    }
  }
}
</script>

{{job.Position}
{{job.Description}
提交
从“vuex”导入{mapGetters}
从“/FileUpload”导入文件上载
导出默认值{
组成部分：{
文件上传
},
数据（）{
返回{
表格：{
名称：空，
电子邮件：空，
电话：空，
封面信：''
},
有效：正确
}
},
计算：{
…地图绘制者({
乔布斯：“乔布斯”
})
},
方法：{
提交（职位、职务ID）{
如果（此.$refs.form[0].validate（））{
此.$store.dispatch（'submitApplication'{
名称：this.form.Name，
电子邮件：this.form.Email，
电话：这个，
职位:职位,，
求职信：这是你的求职信
})
。然后（（res）=>{
此.refs.uploadFile[0]。提交文件（res.data.id）
})
.catch（（错误）=>{
console.log（错误）
})
}
}
}
}

文件上载组件：

<template>
  <div class="container">
    <div class="large-12 medium-12 small-12 cell">
      <input type="file" ref="file" :id="job._id" class="inputfile" v-on:change="handleFileUpload()" />
      <label :for="job._id">Add Resume</label>
      <br>
      <span v-if="file" >
        {{ file.name }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      file: null
    }
  },
  props: ['job'],
  methods: {
    submitFile (refId) {
      let formData = new FormData()
      formData.append('files', this.file)
      formData.append('refId', refId)
      formData.append('field', 'Resume')
      formData.append('ref', 'application')
      this.$store.dispatch('uploadFile', formData)
        .then(() => {
          this.file = null
        })
    },
    handleFileUpload () {
      this.file = this.$refs.file.files[0]
    }
  }
}
</script>

添加简历


{{file.name}
导出默认值{
数据（）{
返回{
文件：空
}
},
道具：[“工作”]，
方法：{
提交文件（refId）{
设formData=new formData（）
formData.append（'files'，this.file）
formData.append（'refId'，refId）
formData.append（'field'，'Resume'）
formData.append（'ref'，'application'）
此.$store.dispatch（'uploadFile'，formData）
.然后（（）=>{
this.file=null
})
},
handleFileUpload（）{
this.file=this.$refs.file.files[0]
}
}
}

代码中的问题是使用

此。$refs.form[0]

和

此。$refs.uploadFile[0]

。这导致始终获取

this.$refs.form

和

this.$refs.uploadFile的第一个ref

如前所述：

当在带有v-for的元件/组件上使用时，注册的引用
将是包含DOM节点或组件实例的数组

因此，您应该使用一个索引从ref数组中获取正确的ref

因此，更新您的代码如下，然后应该工作

将
v-for=“作业中的作业”
更改为
v-for=“（作业，索引）作业中”

将
submit（job.Position，job.\u id）
更改为
submit（job.Position，job.\u id，index）

在function=submit中，将
this.$refs.form[0]
替换为
this.$refs.form[index]
并将
this.$refs.uploadFile[0]
更改为
this.$refs.uploadFile[index]

你能提供一些代码让我们查看，而不仅仅是输出吗？@John I添加了组件。尝试以下操作：将
v-for=“job in jobs”
更改为
v-for=“（job，index）in jobs”
，将
提交（job.Position，job.id）
更改为提交（job.Position，job.\u id，index）

，然后在function=submit，将

this.$refs.form[0]

替换为

this.$refs.form[index]

@Sphinx，但它不起作用，仍然没有文件上载，响应仍然相同。您应该将

此。$refs.uploadFile[0]

更改为

此。$refs.uploadFile[index]