100 lines
2.3 KiB
Vue
100 lines
2.3 KiB
Vue
<template>
|
|
<section>
|
|
<base-card>
|
|
<h2>How was you learning experience?</h2>
|
|
<form @submit.prevent="submitSurvey">
|
|
<div class="form-control">
|
|
<label for="name">Your Name</label>
|
|
<input type="text" id="name" name="name" v-model.trim="enteredName" />
|
|
</div>
|
|
<h3>My learning experience was ...</h3>
|
|
<div class="form-control">
|
|
<input
|
|
type="radio"
|
|
id="rating-poor"
|
|
value="poor"
|
|
name="rating"
|
|
v-model="chosenRating"
|
|
/>
|
|
<label for="rating-poor">Poor</label>
|
|
</div>
|
|
<div class="form-control">
|
|
<input
|
|
type="radio"
|
|
id="rating-average"
|
|
value="average"
|
|
name="rating"
|
|
v-model="chosenRating"
|
|
/>
|
|
<label for="rating-average">Average</label>
|
|
</div>
|
|
<div class="form-control">
|
|
<input
|
|
type="radio"
|
|
id="rating-great"
|
|
value="great"
|
|
name="rating"
|
|
v-model="chosenRating"
|
|
/>
|
|
<label for="rating-great">Great</label>
|
|
</div>
|
|
<p v-if="invalidInput">
|
|
One or more input fields are invalid. Please check your provided data.
|
|
</p>
|
|
<div>
|
|
<base-button>Submit</base-button>
|
|
</div>
|
|
</form>
|
|
</base-card>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
enteredName: '',
|
|
chosenRating: null,
|
|
invalidInput: false
|
|
};
|
|
},
|
|
emits: ['survey-submit'],
|
|
methods: {
|
|
submitSurvey() {
|
|
if (this.enteredName === '' || !this.chosenRating) {
|
|
this.invalidInput = true;
|
|
return;
|
|
}
|
|
this.invalidInput = false;
|
|
|
|
axios.post(
|
|
'https://vue-http-demo-8a928-default-rtdb.europe-west1.firebasedatabase.app/surveys.json',
|
|
{ name: this.enteredName, rating: this.chosenRating }
|
|
);
|
|
|
|
// this.$emit('survey-submit', {
|
|
// userName: this.enteredName,
|
|
// rating: this.chosenRating
|
|
// });
|
|
|
|
this.enteredName = '';
|
|
this.chosenRating = null;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.form-control {
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
input[type='text'] {
|
|
display: block;
|
|
width: 20rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
</style>
|