-
今天写项目遇到一个问题，使用到了 $nextTick
-
场景是这样的
父组件同步给子组件 :disabled.sync="disabled" 的时候，子组件是一个弹框
image.png
当点击保存的时候，需要把 button 变成 disabled 的样式，防止用户多次点击，并且点击保存会请求后端保存的 API，会有个等待时间，当后端返回成功后，在父组件中把 disabled 设置为 false，让弹框消失。
但是如果弹框里面的内容没有改变，点击保存，其实没有必须请求后端 API，我是在父组件中做了这样的操作，当我点击某一项要修改的时候，我会先把它的 name 和 url 保存下来，当子组件(也就是弹框) 点击保存没有做修改，我会在父组件中，拿 oldName，oldUrl 和子组件传递过来的进行比较，如果相等就把 disabled 设为 false (这里是因为，点击保存在子组件中会执行 update 操作，把 disabled 设置为 true)
但是当没有改变时，把 disable 设置为 false，并没有效果，vue 并没有派发更新操作，这是就要用到了 $nextTick 在这个函数里面把 disabled 设置为 false。
网友评论