CODEWITHSUNDEEP
vue.js
TaraPope22
TaraPope22

Reputation: 59

Vue Event listener on mouse hold

How can you set a boolean to true when the mouse click is held down, and false when you release the click? On Vue I am using v-on:mousedown="hold = !hold" But this toggles the boolean instead of having the user hold the click down.

Upvotes: 2

Views: 8972

Answers (2)

Cray
Cray

Reputation: 2850

Use both mousedown and mouseup events.

<div
  v-on:mousedown="hold = true"
  v-on:mouseup="hold = false"
>{{hold}}</div>

Upvotes: 3

Gabriel Willemann
Gabriel Willemann

Reputation: 1921

You need to use the events mousedown and mouseup. Try something like this:

<template>
  <div>
    <div :style="{ 'background-color': color }">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
    <button @mousedown="color = 'orange'" @mouseup="color = 'green'" >Click here</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    color: 'yellow',
  }),
};
</script>

Upvotes: 5

Related Questions