В Vue.js для удаления addEventListener можно использовать два подхода:
1. Использование директивы v-on:
Вы можете добавить addEventListener к элементу с помощью директивы v-on (или сокращенной версии @), а затем удалить его, удалив соответствующий обработчик события.
Пример:
<template>
<button v-on:click="toggleEventListener">Добавить / Удалить Event Listener</button>
</template>
<script>
export default {
data() {
return {
eventListenerAdded: false
};
},
methods: {
toggleEventListener() {
if (this.eventListenerAdded) {
document.removeEventListener('click', this.handleClick);
} else {
document.addEventListener('click', this.handleClick);
}
this.eventListenerAdded = !this.eventListenerAdded;
},
handleClick(event) {
console.log('Событие клика:', event);
}
}
};
</script>
В этом примере при нажатии на кнопку вызывается метод toggleEventListener, который проверяет, добавлен ли уже обработчик события, и в зависимости от этого либо добавляет его с помощью addEventListener, либо удаляет его с помощью removeEventListener. Метод handleClick выполняется при событии клика, и в нем можно выполнить нужные вам действия.
2. Использование директивы v-if:
Еще один способ удалить addEventListener в Vue.js - использовать директиву v-if, чтобы условно добавлять или удалять элемент на основе значения свойства.
Пример:
<template>
<div>
<button v-if="eventListenerAdded" v-on:click="removeEventListener">
Remove Event Listener
</button>
<button v-else v-on:click="addEventListener">
Add Event Listener
</button>
</div>
</template>
<script>
export default {
data() {
return {
eventListenerAdded: false
};
},
methods: {
addEventListener() {
document.addEventListener('click', this.handleClick);
this.eventListenerAdded = true;
},
removeEventListener() {
document.removeEventListener('click', this.handleClick);
this.eventListenerAdded = false;
},
handleClick(event) {
console.log('Событие клика:', event);
}
}
};
</script>
В этом примере, используя свойство eventListenerAdded, мы обновляем отображение кнопок на основе того, был ли добавлен обработчик события. Когда пользователь нажимает кнопку, вызывается соответствующий метод (addEventListener или removeEventListener), и обработчик события добавляется или удаляется, а значение eventListenerAdded соответствующим образом обновляется.