I import file and check in the function isValidCell() which returns true or false. if the return is false I want to set always focused until user inputs value.
I tried to set by autofocus and document.getelementbyid("notValid").focus() but its not working. How can i do this?
<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>
I think you can take the reference from the code below
<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()
},
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.