How to trigger input change event on button click in Vue?

Question

Vue.js

there is an input

<input
          id="form-avatar"
          type="file"
          ref="uploadAvatar"
          autocomplete="off"
          accept="image/png,image/jpeg,image/bmp,image/tiff"
          @change="onFileChange"
        />

and button

<button
              type="button"
              class="btn btn-upload"
              @click.prevent="changeUpload"
            >
              Загрузить
            </button>

how to trigger input change event on button click? Or is there another way?

Answer 1

<button
  type="button"
  class="btn btn-upload"
  @click.prevent="$refs.uploadAvatar.click()"
>
  Загрузить
</button>

Answer 2

You have vue, in the changeUpload method you call the onFileChange method.