事件侦听器“调整大小”不会更改 Vue.js 中 data() 变量的值答案

【问题标题】：eventListener 'resize' doesnt change the value of a data() variable in Vue.js事件侦听器“调整大小”不会更改 Vue.js 中 data() 变量的值
【发布时间】：2018-09-06 02:08:25
【问题描述】：

场景： 我有一个 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)
    });
  },

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

【问题讨论】：

你能加个小提琴吗？

标签： javascript vue.js addeventlistener

【解决方案1】：

这是因为您的 this 范围在事件处理程序中是不同的。试试：

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

【讨论】：

您可以将其绑定到函数，这样您就不必使用变量或使用 ES6 语法。

【解决方案2】：

@sliptype 是正确的，但是使用 es6 你可以使用 lambda function 来做到这一点

mounted() {
    window.addEventListener('resize', () => 
        this.sliderWidth = document.getElementById('slider').offsetWidth
    )
}

【讨论】：