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

【问题标题】：how to set input form-control focused by default until input value in vue js?如何在 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" alt="error icon"/>
                                    </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>

【问题讨论】：

标签： javascript html css vue.js vue-component

【解决方案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()
        },
    }
}

【讨论】：