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)
    });
  },

当我调整窗口大小时，它每次都会在eventlistener的控制台日志上抛出一个新值，但是如果我单击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)
    });
  },

Answer 2

@sliptype是正确的，但是使用es6，您可以使用lambda function

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

eventListener'resize'不会改变Vue.js中data（）变量的值

2 个答案: