如何在 vue js 中设置输入表单控件默认聚焦，直到输入值？

Posted 2023-02-23

【中文标题】如何在 vue js 中设置输入表单控件默认聚焦，直到输入值？

【英文标题】：how to set input form-control focused by default until input value in vue js?

【发布时间】：2021-06-01 16:44:14

【问题描述】：

我导入文件并检查返回 true 或 false 的函数 isValidCell()。 如果返回为 false，我想设置始终聚焦，直到用户输入值。

我尝试通过 autofocus 和 document.getelementbyid("notValid").focus() 进行设置，但它不起作用。 我该怎么做？

<div class="table-body">
                    <div class="table-row" v-for="(row, index) in currentFile.data" :key="index" :class="'duplicated-tooling': (duplicatedForm.isRegRetry) || (duplicatedForm.isRetry &&  duplicatedForm.duplicatedTooling.id === row[0] && isDuplicatedTooling(index, currentFileIndex))">
                        <div class="table-cell" :style="flex: '0 0 55px'">
                            <div class="row-action" @click="showWarningDeleteForm(index)">
                                <i class="fa fa-times-circle"></i>
                            </div>
                        </div>
                        <div class="table-cell" :id="'cell-' + index + '-' + headerIndex" :class="'text-left': header.mappedHeader.code === 'toolDescription'" v-for="(header, headerIndex) in currentFile.headers" :key="headerIndex"
                             :style=" flex: '0 0 ' + lengthOfHeader(header) * 10  + 'px', maxWidth: lengthOfHeader(header) * 10  + 'px' " @dblclick="showFormEditCell">
                            <div class="value-wrapper">
                                <div class="value"> labelOfCell(header, row[headerIndex]) </div>
                                <div class="input-form-wrapper">
                                    <div class="left-content">
                                        <select v-if="header.mappedHeader.rules.options" class="form-control" v-model="row[headerIndex]">
                                            <option v-for="option in header.mappedHeader.rules.options" :value="option.value">  option.name </option>
                                        </select>
                                        <textarea v-else-if="header.mappedHeader.rules.inputType === 'textarea'" class="form-control" v-model="row[headerIndex]"></textarea>
                                        <input v-else class="form-control" v-model="row[headerIndex]" />
                                    </div>
                                    <div class="right-content" v-if="false">
                                        <div class="btn-action save-input">
                                            <i class="fa fa-check"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="cell-error-wrapper" v-if="!isValidCell(header, row[headerIndex])">
                                <div class="cell-error" :class=" left: headerIndex === currentFile.headers.length - 1">
                                    <div class="error-icon">
                                        <img src="/images/import-tooling/question-mark.svg" />
                                    </div>
                                    <div class="error-content">
                                        <div class="error-arrow"></div>
                                        <div class="error-body" v-html="errorMessage(header, row[headerIndex])">
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

【参考方案1】：

我认为您可以从下面的代码中获取参考

<template>
<div>
    <el-form :model="form" ref="form">
        <el-input v-model="form.email" ref="email">
        </el-input>

        <el-button type="primary" @click="setFocus">
        </el-button>
    </el-form>
</div>

export default 
    name: 'Login',
    data() 
        return 
            form: 
                email: '',
            ,
        ;
    ,
    methods: 
        setFocus() 
             his.$refs.input.$refs.input.focus()
        ,