Vue Js Form Validation with Components and Element UI

1.2k views Asked by At

I am trying to find a way using vue js, components, and element ui to validate a form that is within a table and has data pushed into it from a template. At the moment this is a snippet of the code that I have written, where if el-input is empty the message “hi” should appear as a blur event. However, it shows up even when there is a value in the input field, and seems like the validation cannot read the value that is inserted from the template. Any ideas on how to connect the two?

<el-form ref=“formA”>
  <el-table :data=“data_list” border class=“my-table" size="mini" row-key="id">
   <el-table-column property=“my_name":label='$t("attributes.person_name")' width="200">
        <template slot-scope="scope">
            <el-form-item :prop=“’data_list.' + scope.$index + ‘.my_name'"
                :rules="{
                            required: true,
                            message: 'hi',
                            trigger: 'blur'
                        }">
                <el-input v-model="scope.row.my_name" />
            </el-form-item>
        </template>
    </el-table-column>
</el-table>

0

There are 0 answers