如何仅触发一次vue方法,而不是每次都触发一次

Question

我正在处理旋转甚至change:

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

现在,第二个this.rotate运行在每个change.我该怎么做才能使第二次this.rotate只handleRotate运行第二次？

Answer 1

解决方式Vue方式:

你可以使用$ once,它只会监听一次事件.

听一下自定义事件,但只能听一次.一旦第一次触发,侦听器将被删除.

你只需要添加.once到@change喜欢以下内容:

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

检查演示是否在小提琴中.

旧答案:

如果您不想设置初始值rotate,则可以再增加一个变量:hasRotated跟踪旋转是否已更改.最初设置hasRotated为true,一旦将rotate更改设置hasRotated为false,如下所示:

<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

一个简单的解决方案是添加一个标记，如下所示：

<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>

当然，您需要启动this.rotated为false