You don’t know the pit of iView checksum

Let you learn knowledge clearly, there are codes, there are explanations, copy of the walk, learn will!Copy the code

Scenario: iView dynamic form

Iview version: 4.3.2

Vue version: 2.6.11

Scenario Description: When using iView’s form validation, there is a scenario where form elements are dynamic, that is, the number of items on the page depends on the data

Directly above

Goal: Verify that the name and personal description are not empty when clicking submit

The complete code

<template>
  <div>
    <h3 style="text-align: center; margin-top: 20px;">Dynamic form verification</h3>
    <Row>
      <i-col :span='10' :offset='10'>
        <Form ref='formModel' v-model='formModel' :rules='rules'>
          <FormItem label='Please select'>
            <Select v-model='formModel.type'>
              <Option :value='1'>According to the body</Option>
              <Option :value='2'>Show the title</Option>
              <Option :value='3'>Body + title + label</Option>
            </Select>
          </FormItem>
          <FormItem v-if='isShowTitle' label='title'>
            <i-input v-model='formModel.title'></i-input>
          </FormItem>
          <FormItem prop='name' label='name'>
            <i-input v-model='formModel.name'></i-input>
          </FormItem>
          <FormItem prop='desc' label='Personal Description'>
            <i-input v-model='formModel.desc'></i-input>
          </FormItem>
          <FormItem label='Affiliate Information'>
            <i-input v-model='formModel.attachInfo'></i-input>
          </FormItem>
          <FormItem label=The 'body' v-if='isShowContent'>
            <i-input v-model='formModel.content'></i-input>
          </FormItem>
          <FormItem>
            <Button type='primary' @click='submit'>check</Button>
          </FormItem>

          <div v-show='showTips'>Verification failed</div>
        </Form>
      </i-col>
    </Row>

  </div>
</template>

<script>
export default {
  name: 'check',
  data () {
    return {
      rules: {
        name: [{required: true.message: 'Name cannot be empty'}].desc: [{required: true.message: 'Description text cannot be empty'}},formModel: {
        name: ' '.desc: ' '.type: ' '.content: ' '.title: ' '.attachInfo: ' '
      },
      showTips: false}},computed: {
    isShowContent () {
  		return this.formModel.type === 1 || this.formModel.type === 3
    },
    isShowTitle () {
  		return this.formModel.type === 2 || this.formModel.type === 3}},methods: {
    submit () {
      this.$refs.formModel.validate(valid= > {
        if(! valid) {this.showTips = true
          return
        }
        console.log('ok')
  		this.showTips = false})}}}</script>
Copy the code

$refs.formModel.validate (); $refs.formModel.validate (); $refs.formModel.validate (); $refs.formModel.validate ()

How to solve the above problem?

Change v-if to v-show. A lot of people are used to v-if, when encountered such a problem, really do not know how to solve, you may not think of the need to change to V-show, this bug should be iView

This problem would not occur if all of the above v-if values were false, i.e. there were no hidden scenes interleaved like I did

The contents that need to be displayed dynamically are in the bottom and those that need to be verified are in the top. In this case, v-if and V-show are used to verify the results without any difference or misalignment

Element-ui 2.13.2 has been tested and no bugs found 😂

Say quickly, you have stepped to this pit 😁