vue项目中遇到的一些问题

9 篇文章 0 订阅

1.修改完数据点击提交,数据变了,但是页面数据没有更新

原因:因为vue的检车机制在进行视图更新时无法监测数组中的某个对象的属性值的变化。(数据是引用数据类型,数据上没有get和set方法)
解决方法:
1.利用this.$set(this.obj,key,val)
解析:第一个参数是目标对象,第二个参数是要修改的数据下标,第三个参数是修改后的新值
2.也可以使用this.$nextTick()这个方法
解析:在下一次DOM更新循环结束之后,执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM,Vue在更新DOM时是异步执行的,
当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新。
3.强制刷新 this.$forceUpdate() 

2. vue引入本地图片的特殊情况

除了img标签的src和css的background:url(),其他情况想要引用本地项目的静态资源图片需要用require(‘…/…/assets/img/aaa.png’)的格式,而不能直接用’…/…/assets/img/aaa.png’格式引入。

如在某个组件内引用,如echart或G6引擎中的图标img或icon
————————————————
版权声明:本文为CSDN博主「接着奏乐接着舞。」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/wanghaoyingand/article/details/118078360

     icon: {
       show: true,
       cursor: 'pointer',
       img: require('../../assets/img/aa.png'),
       width: 75,
       height: 91
     },

3.props单向绑定

vue中的props是单向绑定的,父组件的属性变化时会传递给子组件,子组件内部不应改变props的值,否则控制台会给出警告。

但如果props的类型为数组或者对象时,在子组件内部改变props的值控制台不会警告。因为数组或对象是地址引用,vue不会检测到props发生改变。所以有的情况需要在子组件内部改变父组件的值,可以将属性定义为数组或者对象类型传入。

但官方不建议在子组件内改变父组件的值,因为这违反了vue中props单向绑定的思想。

4. 深拷贝数组或对象

对象或数组的简单赋值,修改新值也会改变原值。这时我们需要获取原值的深拷贝对象。

对于对象,可以通过newObj = JSON.parse(JSON.stringfy(obj))实现。

对于数组,可以通过 newArr = […arr]或者newArr = arr.slice(0)来实现。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

曹筱君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值