Je travaille actuellement sur un formulaire et je rencontre quelques problèmes pour activer le bouton lorsqu'une condition est remplie.

Actuellement, j'ai créé un formulaire avec des entrées pour le nom, le numéro de téléphone, certaines options et un message. Lorsque la condition est remplie, je souhaite activer le bouton que j'ai désactivé.

Est-ce que quelqu'un sait comment réactiver le bouton pour soumettre le formulaire ?

<template>

    <div class="contact">
  <h1>Vi uppskattar alla frågor som du har angående denna applikation!</h1>
  <h2> Vänligen skriv ett meddelande här nedan så ska vi göra allt vi kan för att svara så snart som möjligt!</h2>
</div>

  <form @submit.prevent="submitForm">
    <div class="form-control" :class="{invalid: fullNameValidation === 'invalid'}">
      <label for="name">Namn</label>
      <input id="name" name="name" type="text" v-model="fullName" @blur="validateInput">
      <p v-if="fullNameValidation === 'invalid'">Vänligen fyll i ett namn</p>
    </div>
    <div class="form-control" :class="{invalid: phoneValidation === 'invalid'}">
      <label for="phone">Telefonnummer</label>
      <input id="phone" name="phone" type="number" v-model="phoneNr" @blur="validatePhone" pattern="[0-9]*">
      <p v-if="phoneValidation === 'invalid'">Vänligen fyll i ett giltigt telefonnummer</p>
    </div>
    <div class="form-control">
      <label for="referrer">Hur fick du kännedom av denna applikation?</label>
      <select id="referrer" name="referrer" v-model="referrer">
        <option value="" disabled hidden>Välj ett alternativ</option>
        <option value="internet">Internet</option>
        <option value="friends">Vänner</option>
        <option value="newspaper">Nyhetstidningar</option>
        <option value="other">Annat</option>
      </select>
    </div>
    <div class="form-control" :class="{invalid: messageValidation === 'invalid'}">
      <label for="message">Meddelande</label>
      <textarea name="message" id="message" cols="30" rows="10" v-model="message" @blur="validateMessage"></textarea>
       <p v-if="messageValidation === 'invalid'">Vänligen fyll i ditt meddelande</p>
    </div>

    <div>
      <button v-on:click="$router.push('thankyou')" :disabled="!isComplete" id="myBtn">Skicka meddelande</button>
    </div>
  </form>
</template>

<script>
export default {
    data() {
        return {
            fullName: '',
            fullNameValidation: 'pending',
            phoneNr: 'null',
            phoneValidation: 'pending',
            referrer: '',
            messageValidation: 'pending'
        }
    },

    methods: {
        submitForm() {
            this.fullName = '';
        },
        validateInput() {
            if (this.fullName === '') {
                this.fullNameValidation = 'valid'
            } else {
                this.fullNameValidation = 'invalid'
            }
        },
        validatePhone() {
            if (this.phoneNr > 10) {
                this.phoneValidation = 'valid'
            } else {
                this.phoneValidation = 'invalid'
            }
        },
         validateMessage() {
            if (this.messageValidation > 1) {
                this.messageValidation = 'valid'
            } else {
                this.messageValidation = 'invalid'
            }
        },

        computed: {
       isComplete() {
          return Object.values(this.fields).every(({valid}) => valid)
      }
  }
    }
}
</script>