javascript — eventListener ‘resize’ не меняет значение переменной data () в Vue.js

eventListener ‘resize’ не меняет значение переменной data () в Vue.js

Сценарий: у меня есть div с идентификатором «ползунок», и я должен сохранить реактивное значение его offsetWidth внутри переменной в функции данных компонента.

Итак, я сделал что-то вроде этого:

 {amp}lt;template{amp}gt; {amp}lt;div id="slider"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; export default { name: 'Slider', mounted() { window.addEventListener('resize', function () { this.sliderWidth = document.getElementById('slider').offsetWidth; }); }, data() { return { sliderWidth: 0, }; }, methods: { }, }; {amp}lt;/script{amp}gt; 

а затем я добавил метод, чтобы увидеть текущее значение sliderWidth

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

и добавил этот метод к событию @click в div:

 {amp}lt;div id="slider" @click="callWidth"{amp}gt; {amp}lt;/div{amp}gt; 

но затем что-то странное начало происходить, когда я нажимал на ползунок после изменения размера окна, его значение всегда было 0.

поэтому я добавил консольный журнал в прослушиватель событий следующим образом:

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

и когда я изменяю размер окна, он каждый раз выбрасывает новое значение в консольный журнал EventListener, но если я нажимаю на div, console.log функции callWidth выдает 0, почему это так?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector