Vuetifyのv-file-inputにおいてappned-outer-iconで設定したアイコンにクリックイベントを入れたい。

Question

Vuetifyのv-file-inputにおいて、append-outer-iconで設定したアイコンをクリックして
ファイルのインプットができるようにしたいと思い下記のような
コードを作成しました。

<template>
    <v-file-input
                    prepend-icon=""
                    append-outer-icon="mdi-folder-open"
                  ></v-file-input>
    </template>

作成したコードではアイコンをクリックしても、フォルダが開きません。
どうすれば、ファイルを開くことができるようになるでしょうか？
詳しい方、ご教示いただけますと幸いです。

Answer 1

v-file-inputの　@click:append-outer eventを利用して実現可能かと思います。

以下のようなイメージです。

<template>
  <div id="app">
    <v-app>
      <v-file-input
        class="ma-10"
        ref="vFileInput"
        prepend-icon=""
        append-outer-icon="mdi-folder-open"
        @click:append-outer="handleClickAppendOuter"
      ></v-file-input>
    </v-app>
  </div>
</template>

<script>
export default {
  name: "App",
  data: function () {
    return {
      drawer: null,
    };
  },
  methods: {
    handleClickAppendOuter() {
      this.$refs.vFileInput.$el.querySelector("input").click();
    },
  },
};
</script>

Comments

[takochan1192]

ご回答いただききましてありがとうございました！無事に実行することができました！