数据更改时Vue js + Typescript滚动到div底部答案

【问题标题】：Vue js + Typescript Scroll to bottom of div when data changes数据更改时Vue js + Typescript滚动到div底部
【发布时间】：2020-07-01 14:58:50
【问题描述】：

我有一个用 cmets 更新的 div，我希望在添加新评论时滚动到该 div 的底部。我试图做这样的事情：

gotoBottom() {
    let content = this.$refs.commentsWrapper;
    content.scrollTop = content.scrollHeight
}

包含 cmets 的 div 具有引用 ref="cmetsWrapper"，我在函数内部收到此错误

Property 'scrollTop' does not exist on type 'Vue | Element | Vue[] | Element[]'.
Property 'scrollTop' does not exist on type 'Vue'.

我在互联网上搜索，我认为这是 Typescript 错误。我尝试这样做，但它也不起作用。

this.$refs.commentsWrapper['scrollTop'] = this.$refs.commentsWrapper['scrollHeight']

提前致谢

【问题讨论】：

试试 let content = this.$refs.cmetsWrapper.$el;
每Raffobaffo的评论，见Vue Docs for ref：If used on a plain DOM element, the reference will be that element; if used on a child component, the reference will be component instance.
@Raffobaffo 谢谢！
欢迎。请您支持我的评论，正确答案与我的评论内容相同:)

【解决方案1】：

将您的代码更改为

gotoBottom() {
    let content = this.$refs.commentsWrapper as Vue;
    content.$el.scrollTop = content.scrollHeight;
}

由于this.$refs.content 是一个 Vue 组件（在您的情况下），您需要访问 this.$refs.content.$el 才能访问 DOM 元素。

【讨论】：