How to focus click on input vue - vue.js

Question

how do i focus input with a button onClick?
<div class="form-group"
v-for="(file, i) in registerData.requiredDocuments"
:key="`file-${i}`">
<label for="npwp" class="text-muted"> {{file.name}} </label>
<input type="file"
:name="file.name"
class="form-control-file"
:id="file.name"
:accept="file.name === 'Logo' ? `image/png, image/jpg, image/jpeg` : `application/pdf`">
<div class="d-flex">
<button class="btn btn-primary" type="button">Choose File</button>
</div>
</div>
i was hoping by clicking the 'choose file' button it would trigger the input. I've tried
// the input
<input :ref="file.name" type="file">
// the button
<button #click="$refs.file.name.focus()">Choose File</button>
but what i get is the name is undefined anyone knows how to fix this?

Answer 1

I had similar problem before, Here is how and did it.
<template>
<div>
<div class="form-group" v-for="(file, i) in registerData.requiredDocuments" :key="`file-${i}`">
<label for="npwp" class="text-muted"> {{file.name}} </label>
<input type="file" :ref="'file' + i" :name="file.name" class="form-control-file" :id="file.name"
:accept="file.name === 'Logo' ? `image/png, image/jpg, image/jpeg` : `application/pdf`">
<div class="d-flex">
<button #click.prevent="setFileFocus(i)" class="btn btn-primary" type="button">Choose File</button>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
setFileFocus(index) {
this.$nextTick(function(){
this.$refs[("file" + index)][0].focus()
})
}
}
}
</script>
I called focus on nexttick. Hope my answer will be helpful