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="'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>

我在focus上给nexttick打了电话。希望我的回答会有所帮助

如何聚焦点击输入提示

1 个答案: