javascript - eventListener 'resize' 不会更改 Vue.js 中 data() 变量的值

Question

场景: 我有一个 ID 为“slider”的 div，我必须将其 offsetWidth 的 react 值存储在组件数据函数的一个变量中。

所以我做了这样的事情:

<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>

但随后发生了一些奇怪的事情，当我在调整窗口大小后单击 slider 时，它的值始终为 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)
    });
  },