VueJS 3: 조건이 충족되면 버튼 활성화
현재 양식을 작성하는 중인데 조건이 충족되면 버튼을 활성화하는 데 몇 가지 문제가 있습니다.
현재 이름, 전화번호, 일부 옵션 및 메시지를 입력하는 양식을 만들었습니다. 조건이 충족되면 비활성화한 버튼을 활성화하고 싶습니다.
양식을 제출하기 위해 버튼을 다시 활성화하는 방법을 아는 사람이 있나요?
<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>