无法从 Vue Computed 属性访问 element.scrollLeft 位置？如何？答案

【问题标题】：Unable to access element.scrollLeft position from Vue Computed property ? how?无法从 Vue Computed 属性访问 element.scrollLeft 位置？如何？
【发布时间】：2021-07-15 14:40:45
【问题描述】：

我无法从 Vue 中访问窗口的 scrollLeft 值。我尝试过使用方法和计算属性。我也尝试过直接访问并通过 Refs 请参阅下面的小提琴。

let el  = document.getElementsByClassName("myContainer")
          if (el != null) {
            return el.scrollLeft
        } else {
         return 'unknown'
        }

https://jsfiddle.net/oj1bu5nt/

【问题讨论】：

标签： vue.js

【解决方案1】：

在这种情况下使用 $ref 计算将不起作用，因为...

如此处所述：https://forum.vuejs.org/t/watching-refs-item-for-change-in-clientheight/60039/2 与您的问题直接相关...

Vue 只对自己的数据做出反应，它不能对 DOM 元素做出反应属性变化。

因此 watch 和 computed 属性将在这里工作。您可以做的是监听滚动事件并将值分配给变量，如下所示：

<div ref="myContainer" .... v-on:scroll="getScroll()">

以及功能：

getScroll() {
  this.scroll = this.$refs.myContainer.scrollLeft;
}

你当然有一个名为scroll的数据变量。

你的fiddle

或者你可以通过提供的其他答案:)

【讨论】：

【解决方案2】：

当我们使用文档获取元素时，我们需要使用第 0 个索引来访问该元素。

将您的 if 条件更新为：

if (el[0] != null) {
    return el[0].scrollLeft
}

【讨论】：

感谢您的回复，您说的完全正确。但是，这仍然不能解决问题，因为当滚动位置发生变化时，计算属性应该返回新值，而它没有。这也不能解释为什么 $refs 不起作用。请参阅下面的更新小提琴。 jsfiddle.net/oj1bu5nt/1
我可以通过在滚动上附加一个事件然后将其分配给 data.value 来获得我需要的值。但是我仍然很好奇为什么这不起作用。工作链接>>jsfiddle.net/c7zvj6an