Question

我有一个使用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>

文件上传组件：

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

Answer 1

您的代码中的问题是使用this.$refs.form[0]和this.$refs.uploadFile[0]。这导致始终获得this.$refs.form和this.$refs.uploadFile的第一个参考。

正如Vue Guide所说：

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

因此，您应该使用一个索引从 Ref Array 中获取正确的引用。

因此，请按以下方式更新您的代码，然后才能运作。

将v-for="job in jobs"更改为v-for="(job, index) in jobs"
将submit(job.Position, job._id)更改为submit(job.Position, job._id, index)
，将this.$refs.form[0]替换为this.$refs.form[index]并将this.$refs.uploadFile[0]更改为this.$refs.uploadFile[index]

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

1 个答案: