Initialize the data in data in vue

When the root element of the component uses v-if, the data in data will not be initialized. If you want to completely destroy the component and initialize the data, you need to add v-if to the component itself or manually initialize the data in the component data

Some methods of initializing data

Object.assign(this.$data, this.$options.data())
this.$data: the current data data (modified);
this.$options.data(): initialized data data;
The function of Object.assign is to assign the value of this.$options.data() to this.$data;
// form initialization
this.form = this.$options.data().form
// Vue will bind the data data to the option attribute when creating the page, and you only need to call it to restore

Let’s talk about the usage of Object.assign in detail:

The official ES6 documentation explains that the Object.assign() method is used to copy the values of all enumerable properties from one or more source objects to the target object. it will return target object
method one:
this.data name = this.$options.data().data name;//reset a specified data

Method Two:
this.

d

a

t

a

=

t

h

i

the s

.

data = this.

data=this.options.data(); //Initialize all data in data
Method three:
Object. assign(this.

d

a

t

a

,

t

h

i

the s

.

data, this.

data, this.options.data()) //Get the data source object and overwrite the current data object state

Here is a simple example

Using v-if directly on the root element without destroying data only destroys the el-dialog component and the data in it, but does not destroy the data of the current component

Parent component

<template>
  <div>
    <el-button @click="handleOpen">Display</el-button>
    <el-button @click="handleCls">Hide</el-button>
    <Children ref="children" />
  </div>
</template>

<script>
import Children from './children.vue'
export default {<!-- -->
  name: 'Father',
  components: {<!-- -->
    Children
  },
  props: {<!-- -->

  },
  data() {<!-- -->
    return {<!-- -->

    }
  },
  methods: {<!-- -->
    handleOpen() {<!-- -->
      this.$refs.children.dialogFormVisible = true
      self.console.log(this.$refs.children.dialogFormVisible)
    },
    handleCls() {<!-- -->
      this.$refs.children.dialogFormVisible = false
    }
  }

}
</script>

<style lang="scss" scoped>

</style>

Subcomponent

<template>
  <el-dialog v-if="dialogFormVisible" title="Shipping Address" :visible.sync="dialogFormVisible">
    <el-form:model="form">
      <el-form-item label="activity name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="active area" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select the activity region">
          <el-option label="Area 1" value="shanghai" />
          <el-option label="Area 2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">Cancel</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {<!-- -->
  components: {<!-- -->
  },
  data() {<!-- -->
    return {<!-- -->
      dialogFormVisible: false,
      form: {<!-- -->
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

Display effect

Fill in the data for the first time

open for the second time

Destroy data

Parent component

<template>
  <div>
    <el-button @click="handleOpen">Display</el-button>
    <el-button @click="handleCls">Hide</el-button>
    <Children v-if="dialogShow" ref="children" @handleClose="handleClose" />
  </div>
</template>

<script>
import Children from './children.vue'
export default {<!-- -->
  name: 'Father',
  components: {<!-- -->
    Children
  },
  props: {<!-- -->

  },
  data() {<!-- -->
    return {<!-- -->
      dialogShow: false
    }
  },
  methods: {<!-- -->
    handleOpen() {<!-- -->
      // this.$refs.children.dialogFormVisible = true
      this.dialogShow = true
      // self.console.log(this.$refs.children.dialogFormVisible)
    },
    handleCls() {<!-- -->
      this.dialogShow = false
      // this.$refs.children.dialogFormVisible = false
    },
    handleClose() {<!-- -->
      this.dialogShow = false
    }
  }

}
</script>

<style lang="scss" scoped>

</style>

Subcomponent

<template>
  <el-dialog title="Shipping Address" :visible="true">
    <el-form:model="form">
      <el-form-item label="activity name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="active area" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select the activity region">
          <el-option label="Area 1" value="shanghai" />
          <el-option label="Area 2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">Cancel</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {<!-- -->
  components: {<!-- -->
  },
  data() {<!-- -->
    return {<!-- -->
      dialogFormVisible: false,
      form: {<!-- -->
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {<!-- -->
    handleClose() {<!-- -->
      this. $emit('handleClose')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

Display effect

fill in for the first time

The second open data has been cleared