如何只触发一次 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 运行？

原文由 alex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Vue方式解决：

您可以使用 $once ，它将监听一个事件，但只监听一次。

监听自定义事件，但只监听一次。一旦第一次触发，监听器将被移除。

您只需要将 .once 添加到 @change 如下所示：

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

如果这在 小提琴 中，请检查演示。

---

旧答案：

如果您不想为 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>

原文由 Saurabh 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Victor Radu 发布，翻译遵循 CC BY-SA 3.0 许可协议