更改vuejs后如何获取div的宽度

Question

我正在尝试根据另一个div更改div的宽度。

上面的滚动条是div，它的宽度将根据下表的宽度而变化。

我已经在Vue中将此方法实现为mixin。

    Vue.mixin({
      methods: {
        setScrollBar: () => {
          Vue.nextTick().then(function () {
            let tableWidth = document.querySelector("table.vuetable").offsetWidth;
            let tableWrapper = document.querySelector("div.vuetable-body-wrapper").offsetWidth;
            console.log(tableWidth)
            console.log(tableWrapper)

            document.querySelector("div.top-horizontal-scroll").style.width = tableWidth + "px";
            document.querySelector("div.top-scrollbar").style.width = tableWrapper + "px"
          });
        }
      }
})

单击左上角的按钮以关闭菜单时，它给出了表格的宽度，但是只要单击一下，我想在完全更改后获得表格的宽度。

首先，tableWidth和tableWrapper分别为2714和1677 px。 单击后，应更改为2714和1877。

但单击时会给出最后的宽度，而不是更改的宽度。

在菜单上单击我已设置此方法

<script>
export default {
  methods: {
    setScroll()  {
      console.log("called")
      this.$nextTick(function() {
        this.setScrollBar()
      });
    }
  }
}
</script>

这会被调用，但是每次单击宽度都是第一个未更改的宽度。

Answer 1

vue.js通过js变量为您提供对HTML的控制。 可以直接访问DOM元素（$ refs，querySelector），但是那样一来，您就会遇到vue.js，并失去反应性。

解决问题的正确方法可能需要对代码进行一些重构。通过反应性类或样式属性控制表格的宽度。这样做并获得对表格宽度的完全控制-您可以$watch查看它的更改时间，或者在computed property内使用它，它将在每次更改时重新评估，或在vue指令中。

示例https://jsfiddle.net/efrat19/v5dh4s1t/12/：

im使用div的宽度来确定是否显示另一个元素，因为这两个元素都附加到this.width数据属性上。

（请忽略丑陋的内容：）只关注我想向您展示的内容-我如何通过vue数据属性控制HTML，数据属性是反应性的，因此我可以用它来影响其他元素）

为更好地理解此概念，请仔细阅读template syntax的vue指南。它非常清楚地说明了所有可能的方法。我认为这种方式是vue的基础知识，也是您掌握vue.js框架时最重要的工具。祝你好运，玩得开心！