I have a button that changes a prop that I am passing to a child.

In the child I am watching for changes in this property and will perform a function to validate some fields. After it I am using $emit to change the state of a variable in my parent.

I tried to return a new Promise with a while function inside that keeps checking for a boolean value every 250ms:

methods: {
endPersonalTabValidation(x) {
  this.waiting= false
  this.accountValidated = x
},
startPersonalTabValidation() {
  this.keyPersonalTab = String(Math.floor(Math.random() * 10))

  this.waiting = true

  return new Promise((resolve, reject) => {
    do {
      setTimeout(() => {
        console.log('Waiting...')
      }, 250)
    } while (this.waiting)

    if (this.accountValidated) {
      resolve(true)
    } else {
      reject()
    }
  })
}...

And then in the child call:

<personal-tab
    :validate-tab="keyPersonalTab"
    @clicked="endPersonalTabValidation"
        />

And the watch:

watch: {
    validateTab(newVal, oldVal) {
      this.validationForm()
      console.log(newVal, oldVal)
    },
  },

The child method:

validationForm() {
  return new Promise((resolve, reject) => {
    this.$refs.validatePersonal.validate().then(success => {
      if (success) {
        this.$emit('clicked', true)
        resolve(true)
      } else {
        this.$emit('clicked', false)
        reject()
      }
    })
  })
},

I want to stop the while in the parent when this.waiting changes to false. Then I can perform the if to resolve or reject:

if (this.accountValidated) {
  resolve(true)
} else {
  reject()
}

This is a next button that will allow the user to advance to the next part of the wizard form.

I am getting a infinite loop.