Загрузка файла работает только с первым компонентом в v-for - PullRequest
Новая
       8

Загрузка файла работает только с первым компонентом в v-for

0 голосов
/ 24 мая 2018

У меня есть компонент, который использует 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>

1 Ответ

0 голосов
/ 24 мая 2018

Проблема в ваших кодах - использовать this.$refs.form[0] и this.$refs.uploadFile[0].Причины всегда получают первый ref из this.$refs.form и this.$refs.uploadFile.

Как Vue Guide сказал:

При использовании на элементах / компонентах с v-для зарегистрированной ссылки будет массив, содержащий DOM-узлы или экземпляры компонентов.

Таким образом, вы должны использовать один индекс, чтобы получить правильный ref из Ref Array .

Поэтому обновите ваши коды, как показано ниже, тогда должно работать.

  1. изменить v-for="job in jobs" на v-for="(job, index) in jobs"

  2. изменить submit(job.Position, job._id)на submit(job.Position, job._id, index)

  3. в функции = отправить, заменить this.$refs.form[0] на this.$refs.form[index] и изменить this.$refs.uploadFile[0] на this.$refs.uploadFile[index]

...