我目前正在處理表單，但在滿足條件時啟用按鈕時遇到一些問題。

目前，我建立了一個表單，其中包含用於填寫姓名、電話號碼、一些選項和訊息的輸入。當條件滿足時，我想啟用我已經停用的按鈕。

有人知道我可以再次啟用該按鈕來提交表單嗎？

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