vue+element ui 实现dialog弹窗出错，导致页面消失

vue+element ui 实现dialog弹窗错误小记

问题提出： 当复制弹窗代码进来时，原先页面直接消失

<!-- dialog弹窗 -->
<el-dialog title="收货地址" :visible.sync="dialogForAdd">
	<el-form :model="form">
		<el-form-item label="书名" :label-width="formLabelWidth">
			<el-input v-model="form.name" autocomplete="off"></el-input>
		</el-form-item>
	</el-form>
	<div slot="footer" class="dialog-footer">
		<el-button @click="dialogForAdd = false">取 消</el-button>
		<el-button type="primary" @click="dialogForAdd = false">确 定</el-button>
	</div>
</el-dialog>

导致页面消失的代码

<el-input v-model="form.name" autocomplete="off"></el-input>

页面变化：
正常界面：
代码出错后界面：

原因：

:model=“form”,:model="name"的双向绑定出现问题！

data中没有定义form form.name，双向绑定失败才导致页面消失。
所以，data中应该先定义变量form和name，使双向绑定成功，页面才能成功显示。

data(){
	return{
        form:{
            name: null
        }
}