eventListener“resize”不会更改 Vue.js 中 data() 变量的值

Question

场景： 我有一个 ID 为“slider”的 div，并且必须将其 offsetWidth 的反应值存储在组件数据函数的变量内。

所以我做了这样的事情：

<template>
  <div id="slider">
  </div>
</template>

<script>
export default {
  name: 'Slider',
  mounted() {
    window.addEventListener('resize', function () {
      this.sliderWidth = document.getElementById('slider').offsetWidth;
    });
  },
  data() {
    return {
      sliderWidth: 0,
    };
  },
  methods: {
  },
};
</script>

然后我添加了一个方法来查看当前的 sliderWidth 值

methods: {
   callwidth() {
    console.log(this.sliderWidth);
   } 
  },

并将该方法添加到 div 上的 @click 事件中：

<div id="slider" @click="callWidth">
</div>

但随后奇怪的事情开始发生，当我在调整窗口大小后单击滑块时，其值始终为 0。

所以我在事件监听器上添加了一个控制台日志，如下所示：

  mounted() {
    window.addEventListener('resize', function () {
      this.sliderWidth = document.getElementById('slider').offsetWidth;
      console.log(this.sliderWidth)
    });
  },

当我调整窗口大小时，它每次都会在事件侦听器的控制台日志上抛出一个新值，但是如果我单击 div，callWidth 函数的 console.log 会抛出 0，这是为什么？

Answer 1

这是因为this事件处理程序内的范围不同。尝试：

  mounted() {
    let _this = this;
    window.addEventListener('resize', function () {
      _this.sliderWidth = document.getElementById('slider').offsetWidth;
      console.log(_this.sliderWidth)
    });
  },