This is the second day of my participation in the First Challenge 2022

The problem

Recently I was writing a management platform, using Vue + elementUI, and there was a form requirement in which there was a form item that needed to be dynamically switched.

For example, in a checkbox, if option 1 is selected, form item 1 is displayed below, and if option 2 is selected, form item 2 is displayed below.

The code is as follows:

  <el-form :model="form" :rules="formRule" ref="form">
    <el-form-item prop="status">
      <el-radio v-model="form.status" :label="true">key1</el-radio>
      <el-radio v-model="form.status" :label="false">key2</el-radio>
    </el-form-item>
    <div v-if="form.status">
      <el-form-item prop="key1" label="key1:">
        <el-input v-model="form.key1"></el-input>
      </el-form-item>
    </div>
    <div v-else>
      <el-form-item prop="key2" label="key2:">
        <el-input v-model="form.key2"></el-input>
      </el-form-item>
    </div>
    <el-button @click="reset">reset</el-button>
  </el-form>
Copy the code

export default {
  name: 'HelloWorld',
  data () {
    return {
      form: {
        key1: 'val1'.key2: 'val2'.status: true
      },
      formRule: {
        key1: [{
          required: true.trigger: 'blur'.message: 'Please fill in'}].key2: [{
          required: true.trigger: 'blur'.message: 'Please fill in'}}}},methods: {
    reset () {
      this.$refs.form.resetFields()
    }
  }
}
Copy the code

The effect is as follows:

• When you select key1, which is shown below, the input value is val1
• When you select key2, which is shown below, the input value is val2

Normal is no problem.

But if this is when I need to empty the form, I call this.$refs.form.resetFields().

You can see that when I hit reset, key2’s value becomes val1. It’s reset to key1 value, and that’s a problem.

Analysis of the

Why does this happen? Is it something to do with v-IF?

I had to look at the code for El-Form.

The resetFields method of el-Form calls the resetField method of el-form-item.

El-form-item records the initialValue of the mounted hook function.

And then the initial value is used to reset it.

Normally there is no problem with this process.

But if you think about it, even though we’re using v-if to toggle, we’re using the same component, el-form-item.

Vue will reuse the same component or element if the key is not set.

Created, Mounted and other created hook functions will only fire the first time on the same component, even if you use v-if.

The mounted hook is used to record the initial value of the el-form-item function.

To solve

How do you deal with that?

This is where the key property of the VUE comes in handy.

So we can give components their own keys that trigger their lifecycle hooks when v-IF switches.

    <div v-if="form.status">
      <el-form-item prop="key1" label="key1:" key="key1">
        <el-input v-model="form.key1"></el-input>
      </el-form-item>
    </div>
    <div v-else>
      <el-form-item prop="key2" label="key2:" key="key2">
        <el-input v-model="form.key2"></el-input>
      </el-form-item>
    </div>
Copy the code

You can see that it is normal after the reset.

If you have other ways to communicate, you can also discuss in the comments section.