Как запустить метод vue только один раз, а не каждый раз

я обрабатываю поворот даже на 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 работает?

7
javascript vue.js

3 ответов

решение его Vue путь:

можно использовать $один раз, который будет слушать события, но только один раз.

слушайте пользовательское событие, но только один раз. Прослушиватель будет удален, как только он запускается в первый раз.

вам просто нужно добавить .once to @change следующее:

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

Проверьте демо, если это в скрипка.

старый Ответ:

если вы не хотите иметь начальное значение для rotate, вы можете иметь еще одну переменную:hasRotated чтобы отслеживать, был ли изменен поворот или нет. Изначально установлено hasRotated в true, как только поворот был изменен set 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>
8

одним из простых решений было бы добавить маркер примерно так:

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

конечно, вам нужно будет инициировать это.поворачивается как false

4

Если rotate начать всегда с нуля вы можете сделать:

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