当前位置: 首页 > news >正文

有没有做catalog的网站网站具有购买功能需要怎么做

有没有做catalog的网站,网站具有购买功能需要怎么做,1元二手已备案域名,自己如何做网站教程新增用户遇到的问题: 如果你没有为 formData 设置默认值,而只是将其初始化为空对象 {},则在打开dialog时,正常输入, formdata会变成如下 但是,打开后,直接使用 resetFields 或直接清空表单&…

新增用户遇到的问题:

在这里插入图片描述

如果你没有为 formData 设置默认值,而只是将其初始化为空对象 {},则在打开dialog时,正常输入,
formdata会变成如下
在这里插入图片描述
但是,打开后,直接使用 resetFields 或直接清空表单,
formdata会变成如下:
在这里插入图片描述
Vue 使用 Object.defineProperty 实现响应式系统,而这个方法只能劫持对象在初始化时存在的属性,后添加的属性不会被自动追踪。
Vue 的响应式系统无法检测到新添加的属性,从而导致输入框无法及时更新到 DOM 上。

当 formData 被清空时,后添加的属性(password、username)不会被 Vue 的响应式系统自动追踪,这会导致输入框无法及时挂载到 DOM 上。

解决方案

  • 使用 Vue.set 方法:确保在为对象添加新属性时使用 Vue.set,以确保新属性是响应式的。
this.$set(this.formData, 'name', '');`
  • 初始化默认值:在表单数据对象中预先设置好所有可能的字段,避免在运行时动态添加属性。
formdata: {id: null,username: '',password: '',roleName: ''
},

新问题(修改用户):

<el-dialog :title="formdata.id?'修改用户':'添加用户'" :visible.sync="dialogFormVisible" @close="closedialog"><div class="upload-div"><el-form :model="formdata" ref="formdata" label-width="80px" status-icon><el-form-item class="formitem" label="用户名" prop="username"><el-input v-model="formdata.username"></el-input></el-form-item><el-form-item class="formitem" label="密码" prop="password"><el-input v-model="formdata.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button><el-button @click="resetForm('formdata')">重置</el-button></el-form-item></el-form></div>
</el-dialog>

在这里插入图片描述

由于el-form组件进行了复用,formdata的初始值如上,在对el-table的某一行进行修改时,

changeContent (row) {this.dialogFormVisible = true;// row.password = '';this.$nextTick(() => {this.formdata = JSON.parse(JSON.stringify(row));// this.$set(this.formdata, 'password', '')})
},

formdata重新赋值变成了
在这里插入图片描述
这就导致了在重置时,由于formdata的初始值设置中是有password,所以在重置后,formdata的结构如下
在这里插入图片描述

在打开dialog直接点击重置后,我们再往password的input中输入,发现会无法输入,这是因为此时password不具有响应式,是新添加的属性。
如果打开dialog后,正常操作,则不会有上述问题。在输入password后password才会加入formdata,并变成响应式。

解决办法:
 // 第一种方式:row.password = '';
this.$nextTick(() => {this.formdata = JSON.parse(JSON.stringify(row));console.log("formdata", this.formdata);// 第二种方式:this.$set(this.formdata, 'password', '')
})

这两种方式都能将password变为响应式的。

重置是在重置前的formdata的基础上进行的,重置前的formdata与初始化进行比较,将初始化的属性和属性值赋值到现在的formdata中,而方法不会赋值过来,这也就是password为什么没有响应式的原因。
并且重置只会将在el-form中展示的属性进行重置,对上面的el-form进行重置,发现id和roleName并没有重置到初始状态,这是因为这两个属性并没有设置prop和v-model绑定。
在这里插入图片描述

http://www.hyszgw.com/news/69251/

相关文章:

  • 建设网站的意义建个网站视频教程
  • 自己设计一个网站首页石材公司网站
  • 厦门制作企业网站江苏市场监督管理局旗舰店
  • 旅行社手机网站建设方案iis怎么设置网站
  • 网络营销就是建立企业网站网站备案账号是什么样的
  • 加入网站帮忙做网站wordpress小插件下载地址
  • 哪个网站可以做电视背景墙网站建设制作 南京公司
  • 太原市做网站公司海报设计兼职app
  • 百度网站优化排名闵行品划网站建设公司
  • 网站 专题建设服务wordpress制作小程序
  • 瓯海住房与城乡建设局网站代刷网站推广全网最便宜
  • 三亚门户网站100个农村电商平台
  • 手机购物网站模板贵州门户网站建设
  • 学校网站开发与设计国外酷站收录网站
  • php图片网站源码网站开发如何给用户发邮件
  • 为什麼建网站要先做数据库那些网站可以够买域名
  • 常熟企业建设网站公司怎么制作手机网页链接
  • wordpress keywords东莞seo优化团队
  • 韩雪个人官方网站建设网站网址是多少
  • 正规品牌网站设计哪里的郑州网站建设
  • 免费空间申请网站深圳做自适应网站设计
  • 做网站分为几种在线看视频网站怎么做的
  • 天津做公司的网站海口免费网站建设
  • 太原企业网站排名企业网站用什么技术做
  • 酒生产企业网站建设的目的wordpress创建空白网页
  • 中介网站模板扬州网站建设myvodo
  • 集团网站定制网站建设与管理试卷A
  • 做淘客app要网站吗熊猫代理ip破解版
  • 建设工程职称 在哪个网站动漫制作专业必须会画画吗
  • 毕业设计餐饮网站建设页面设计的简短概念