如何解决Vue.js仅在更改特定数组时才会更新
我目前正在聊天,需要一个将数据添加到数组后向下滚动到div末尾的函数。
updated()
几乎可以正常工作,但是组件中还有一个vue-timepicker
,它显示一个计时器,因此$nextTick()
每秒执行一次,您无法向上滚动。
有什么想法仅在带有消息的数组发生更改或任何其他想法时如何执行$nextTick()
?
updated() {
this.$nextTick(() => this.scrollToBottom());
},
解决方法
您可以watch这样的数组:
watch:{
arrName:{
handler(newVal,oldVal){
this.scrollToBottom()
},deep:true
}
}
,
您需要查看更改的确切属性
watch: {
value(val) {
// executes when value changes
this.$nextTick(() => this.scrollToBottom());
},},
在这里您可以详细了解https://vuejs.org/v2/api/#watch。
请注意,本使用案例不建议使用updated
:
要对状态更改做出反应,通常最好使用计算属性或观察程序。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。