When the element ui+Vue.js form is validated, the data has been obtained in textarea, and there is a required prompt statement for message. What is going on?

problem description

Open dialog, first click "OK", the required items prompt appears, fill in the data in turn, such as "project", "grade" where the required prompt will disappear, but the "event" multi-line text box where there is data prompts still exist

propv-model
"" :

modify the value of blur in rules to blur also has the same problem.

related codes

< el-form: model= "form": rules= "rules" ref= "demoFormRef" label-width= "120px" width= "520px" >

<input type="hidden" v-model="form.r">
<input type="hidden" v-model="form.id">
<el-form-item label=":" prop="projectId">
    <el-select :rows="1" v-model="form.projectId">
        <el-option v-for="proj in project" :key="proj.value" :label="proj.label" :value="proj.value"></el-option>
    </el-select>
</el-form-item>
<el-form-item label=":" prop="eventNames">
    <input type="hidden" v-model="form.eventIds">
    <el-input type="textarea" v-model="form.eventNames" @click.native="selectEvents"></el-input>
    <el-dialog width="60%" title="" :visible.sync="eventTbVisible" append-to-body class="innerDialog" @open="openEventsDialog">
        <el-table fit id="eventTableRef" :data="eventItems" ref="eventTableRef" 
        @selection-change="handleSelectionChangeInner" row-key="id">
            <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
            <el-table-column property="descrip" label="" width="150"></el-table-column>
            <el-table-column property="equipName" label=""></el-table-column>
            <el-table-column property="eventTypename" label=""></el-table-column>
            <el-table-column property="createTime" :formatter="timeFormatter" label=""></el-table-column>
        </el-table>
        <el-col :span="24" class="pagination_container ">
            <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange2" 
            @current-change="handleCurrentChange2" :current-page.sync="currentPage2"  :page-sizes="[6, 10, 15]" :page-size="pageSize2" :total="total2"></el-pagination>
        </el-col>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeSelectEvent"> </el-button>
            <el-button type="primary" @click="submitSelectEvent"> 
            </el-button>
        </div>
    </el-dialog>
</el-form-item>

< / el-form >
Verification rules:
rules: {

eventNames: [
    { required: true, message: "", trigger: "blur, change" }
],

},

when you want to have data in the event text box, the required prompt disappears. Where is the error? Ask the great god for an answer, thank you

Aug.10,2021

write this way, do not write the trigger condition, it will be verified while typing

eventNames: [
    { required: true, message: ''}
],
Menu