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 dataMethod 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