BootstrapVue Ввод файла внутри динамического c компонента не заполняется данными - PullRequest
Новая
       23

BootstrapVue Ввод файла внутри динамического c компонента не заполняется данными

0 голосов
/ 02 апреля 2020

Я создал файл ввода с BootstrapVue. Я сохраняю v-модель в состоянии vuex. Проверка значений через devtools позволяет сохранить эти значения просто отлично.

Проблема в том, что вход находится внутри многошаговой формы, где каждый шаг является динамическим c компонентом. Если я переключаюсь на другой шаг, а затем возвращаюсь к тому, который содержит этот ввод, он отображается как файл не был загружен.

К сожалению, я не могу использовать keep-alive в качестве решения, так как форма проверена с помощью vee-validate: , как отмечалось, эта связанная проблема деактивирована, все еще проверяется. Так, например, если я вставлю неверные данные на шаге 3, а затем вернусь к шагу 2, я больше не смогу перейти на шаг 3 из-за этих неверных данных.

Любая идея о том, что я делаю неправильно? В качестве последнего замечания я бы добавил, что я использовал те же логики c для других типов полей (текстовое поле, радиополе), и они просто отлично работают. 

<template>
  <b-form-group>
    <b-form-file
      v-model="fileValue"
      ref="file-input"
      placeholder="Seleziona i file"
      drop-placeholder="Drop file here..."
      :multiple="multiple ? true : false"
      accept=".jpg,.jpeg,.gif,.png,.pdf"
    />
    <b-button
      @click="clearFiles"
      :disabled="Object.keys(fileValue).length === 0"
      >Rimuovi i file
    </b-button>
  </b-form-group>
</template>

<script>
export default {
  components: {},
  props: {
    multiple: {
      type: Boolean,
      default: true
    },
    getterName: {
      type: String,
      required: true
    },
    setterName: {
      type: String,
      required: true
    }
  },
  computed: {
    fileValue: {
      get() {
        return this.$store.getters["form/files"];
      },
      set(value) {
        this.$store.dispatch(this.setterName, value);
      }
    }
  },
  methods: {
    clearFiles() {
      const emptyValue = this.multiple ? [] : "";
      this.$store.dispatch(this.setterName, emptyValue);
    }
  }
};
</script>
...