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

當我調整窗口大小時，每次都會在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函數執行此操作

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