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>

在fiddle。

中查看演示

旧答案：

如果您不想为rotate设置初始值，则可以再增加一个变量：hasRotated来跟踪旋转是否已更改。最初将hasRotated设置为true，一旦旋转已更改，请将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 as false

Answer 3

如果rotate始终为零，您可以执行以下操作：

export default {
    data: {
        rotate = 0
    },
    methods: {
        handleRotate(e) {
            if (this.rotate !== 0) {
                return;
            }
            this.rotate = this.rotate + this.getRotateAngle(e.clientX, e.clientY);
        }
    }
};

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

3 个答案:

解决方法Vue方式：