How to trigger a vue method only once, not every time

Question

I'm handling a rotate even on change:

<div @change="handleRotate"></div>
<script>
export default {
  data: {
    rotate = 0
  },
  methods: {
    handleRotate () {
      this.rotate = this.rotate + this.getRotateAngle(e.clientX, e.clientY)
    }
  }
}
</script>

Right now, the second this.rotate runs on every change. How can I do it so that the second this.rotate is applied only the first time handleRotate runs?

Answer 1

Solving it Vue way:

You can use $once, which will listen for a event but only once.

Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.

You just need to add .once to @change like following:

<div @change.once="handleRotate"></div>
<script>
export default {
  //No Change here
}
</script>

Check demo if this in the fiddle.

---

Old Answer:

If you do not want to have initial value set for rotate, you can have one more variable : hasRotated to track whether rotate has been changed or not. Initially set hasRotated to true, once rotate has been changed set hasRotated to false, like following:

<div @change="handleRotate"></div>
<script>
export default {
  data: {
    rotate: 123,
    hasRotated: false
  },
  methods: {
    handleRotate () {
      if(this.hasRotated){
        this.rotate = this.rotate + this.getRotateAngle(e.clientX, e.clientY)
        this.hasRotated = false
      }
    }
  }
}
</script>

Answer 2

one simple solution would be to add a marker somewhat like this:

<script>
export default {
  data: {
    rotate = 0
  },
  methods: {
    handleRotate () {
      if(!this.rotated){
          this.rotate = this.rotate + this.getRotateAngle(e.clientX, e.clientY);
          this.rotated = true;
      }
    }
  }
}
</script>

of course you would need to initiate this.rotated as false