如何专注于单击输入Vue

Question

我如何通过按钮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>

我希望通过单击“选择文件”按钮来触发输入。我已经尝试过

// the input

<input :ref="file.name" type="file">

// the button 

<button @click="$refs.file.name.focus()">Choose File</button>

但是我得到的名字是不确定的，没有人知道如何解决此问题？

Answer 1

我以前有类似的问题，这是怎么做的。

<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="filefocus" :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()" class="btn btn-primary" type="button">Choose File</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    methods: {
        setFileFocus: function() {
            this.$refs.filefocus.focus()
        },
    },
    created(){
        setTimeout(x => {
            this.$nextTick(() => this.setFileFocus())
        }, 1000)
    }
}
</script>

我在focus上叫nexttick。希望我的回答会有所帮助