Как выводить имя полученных файлов в input type=file?

Question

[svk44]

получаю объект с именем(item.title) и названием изображения(item.thumb) объекта.
нужно вывести это в таблицу, а затем по необходимости обновлять эти значения. если с текстовыми инпутами все понятно, то как это делать с файловыми инпутами? точнее, можно ли связать(вывести) имя полученного файла сразу с инпутом?

<tr v-for="item in this.$store.state.allItems" :key="item.id"
        >
          <td><input class="adm_input" type="text" v-model="item.title" :readonly="item.isReadonly" :class="item.isReadonly ? '' : 'blocked'"></td>
          <td><input class="adm_input" type="file" :class="item.isReadonly ? '' : 'blocked'"></td>
...
        </tr>

Answer 1

[Aetae]

Так делать нельзя: нельзя писать напрямую в стор, без коммита - что у тебя происходит с помощью v-model. У тебя сейчас должна быть полна консоль ворнингов.

Меняешь v-model на :value и @input="...." и работаешь с этим. Имя файла лежит в $event.target.files[0].name если что.

Comments

[svk44]

Aetae, в v-model у меня выводятся значения полученного объекта. v-model, чтобы затем я смог поменять значения этого объекта и сохранить, происходит все посредством коммита - с этим все норм.
в файловом инпуте: :value="item.thumb", а в v-on:input?

[Aetae]

У тебя item достаётся напрямую из store, v-model соответственно тоже меняет его прямо в store. Никакого коммита я у тебя не вижу. Если ты просто перекоммичиваешь весь объект allItems - это не имеет никакого смысла, объекты в javascript хранятся по ссылке.

В v-on:input очевидно должно быть item.thumb = $event.target.files[0].name, только через коммит.

[stanislavkm]

Aetae,
ошибка: DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

[Aetae]

stanislavkm, ну да, для file неля value поставить, ток получить. И никогда нельзя было. Vue тут не при чём. Если очень хочется - тебе нужен кастомный файл-инпут.

[stanislavkm]

Aetae, исходя из ошибки прямого изменения стора:
условно, в спан выводить полученные данные и рядом инпут, чтобы вводить новые значения и присваивать их значениям в сторе через комит?
иначе, не понимаю как изменить полученное значение.

[Aetae]

stanislavkm, в @input - метод, который делает "update" commit, мутация же сама внутри себя находит конкретный item по id и обновляет значение конкретного поля.
Условно:

mutations: {
  updateItemThumb(state, { id, thumb }) {
    const item = state.allItems.find(item => id === item.id);
    if (item) item.thumb = thumb; 
  }
}

Но это только если надо на лету обновлять стор.

Если же сохранять изменения надо по кнопке, то можно либо просто сделать глубокий клон всего массива из стора(cloneDeep) и уже с ним работать, либо если массив может изменяться на лету из других мест(зачем-то же вы его в стор положили), делать локальный слой изменений, условно:

data: {
  changes: {}
}

:value="(changes[item.id] || item).title" @input="updateItemTitle(item.id, $event.target.value)"

methods: {
  updateItemTitle(id, title) {
    if (!this.chages[id]) this.$set(this.changes, id, { title });
    else this.chages[id].title = title;
  },
  saveChanges() {
    const allItems = this.$store.state.allItems.map(item => {
      if (item.id in this.changes) 
        return {...item, ...this.changes[id]};
      return item;
    });
    this.$store.commit('allItems', allItems);
  }  
}

Само собой это лучше вынести в универсальную обёртку над формами инпутами.)