Как активировать компонент vue-upload-component через сторонню кнопку?

Question

[Andre97]

Добрый день. Надо сделать так, чтоб при нажатии на кнопку отдавался на выгрузку файл. Нашел такой сторонний компонент для vue.js vue-upload-component. Можно сделать внутри него кнопку, то так немного не подходит. Надо как то с другой кнопки его "дернуть". В документации есть пример как это делать по ссылке, примерно так:

<file-upload
    ref="upload"
    v-model="files"
    post-action="/post.method"
    put-action="/put.method"
    @input-file="inputFile"
    @input-filter="inputFilter"
  >
  </file-upload>


  <v-btn @click.prevent="$refs.upload.active = true">
        Загрузить файл
  </v-btn>

только почему то не срабатывает оно. Что не так ы как это сделать?

Answer 1

[Антон Антон]

Если нужно открыть диалог выбора файла, то можно только так:

<label for="id_инпута_файла" class="стиль_чтобы_выглядела_как_кнопка">Содержимое "кнопки"</label>

а скриптом вообще не получится дернуть

Comments

[Andre97]

А можно как то с другой кнопки дернуть ту кнопку, которая в этом компоненте? А сам компонент сделать скрытым или типо того, чтоб его нигде видно не было.

<file-upload
     v-model="files"
    post-action="/post.method"
    put-action="/put.method"
    @input-file="inputFile"
    @input-filter="inputFilter"
  >
       <v-btn>
          Вот эту кнопку как то дернуть
       </v-btn>
  </file-upload>

[Антон Антон]

Andre97, мне кажется, за время, которое прошло с размещения вопроса уже можно реализовать свой компонент с нужной функциональностью с нуля. С использованием нативного label и input[type="file"]