POST and GET data with axios
This commit is contained in:
parent
4350cd5bb5
commit
ef5c9b777a
|
@ -2460,6 +2460,14 @@
|
|||
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
|
||||
"dev": true
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.21.1",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
|
||||
"integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"babel-eslint": {
|
||||
"version": "10.1.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
|
||||
|
@ -5510,8 +5518,7 @@
|
|||
"follow-redirects": {
|
||||
"version": "1.13.3",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz",
|
||||
"integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA=="
|
||||
},
|
||||
"for-in": {
|
||||
"version": "1.0.2",
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^3.0.0"
|
||||
},
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<learning-survey @survey-submit="storeSurvey"></learning-survey>
|
||||
<user-experiences :results="savedSurveyResults"></user-experiences>
|
||||
<learning-survey></learning-survey>
|
||||
<user-experiences></user-experiences>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -10,24 +10,24 @@ import UserExperiences from './components/survey/UserExperiences.vue';
|
|||
export default {
|
||||
components: {
|
||||
LearningSurvey,
|
||||
UserExperiences,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
savedSurveyResults: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
storeSurvey(surveyData) {
|
||||
const surveyResult = {
|
||||
name: surveyData.userName,
|
||||
rating: surveyData.rating,
|
||||
id: new Date().toISOString(),
|
||||
};
|
||||
this.savedSurveyResults.push(surveyResult);
|
||||
console.log(surveyResult);
|
||||
},
|
||||
},
|
||||
UserExperiences
|
||||
}
|
||||
// data() {
|
||||
// return {
|
||||
// savedSurveyResults: [],
|
||||
// };
|
||||
// },
|
||||
// methods: {
|
||||
// storeSurvey(surveyData) {
|
||||
// const surveyResult = {
|
||||
// name: surveyData.userName,
|
||||
// rating: surveyData.rating,
|
||||
// id: new Date().toISOString()
|
||||
// };
|
||||
// this.savedSurveyResults.push(surveyResult);
|
||||
// console.log(surveyResult);
|
||||
// }
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
|
@ -43,4 +43,4 @@ html {
|
|||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
@ -9,7 +9,13 @@
|
|||
</div>
|
||||
<h3>My learning experience was ...</h3>
|
||||
<div class="form-control">
|
||||
<input type="radio" id="rating-poor" value="poor" name="rating" v-model="chosenRating" />
|
||||
<input
|
||||
type="radio"
|
||||
id="rating-poor"
|
||||
value="poor"
|
||||
name="rating"
|
||||
v-model="chosenRating"
|
||||
/>
|
||||
<label for="rating-poor">Poor</label>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
|
@ -23,12 +29,18 @@
|
|||
<label for="rating-average">Average</label>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<input type="radio" id="rating-great" value="great" name="rating" v-model="chosenRating" />
|
||||
<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>
|
||||
<p v-if="invalidInput">
|
||||
One or more input fields are invalid. Please check your provided data.
|
||||
</p>
|
||||
<div>
|
||||
<base-button>Submit</base-button>
|
||||
</div>
|
||||
|
@ -38,12 +50,14 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
enteredName: '',
|
||||
chosenRating: null,
|
||||
invalidInput: false,
|
||||
invalidInput: false
|
||||
};
|
||||
},
|
||||
emits: ['survey-submit'],
|
||||
|
@ -55,15 +69,20 @@ export default {
|
|||
}
|
||||
this.invalidInput = false;
|
||||
|
||||
this.$emit('survey-submit', {
|
||||
userName: this.enteredName,
|
||||
rating: this.chosenRating,
|
||||
});
|
||||
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>
|
||||
|
||||
|
@ -77,4 +96,4 @@ input[type='text'] {
|
|||
width: 20rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
@ -3,7 +3,9 @@
|
|||
<base-card>
|
||||
<h2>Submitted Experiences</h2>
|
||||
<div>
|
||||
<base-button>Load Submitted Experiences</base-button>
|
||||
<base-button @click="loadExperiences"
|
||||
>Load Submitted Experiences</base-button
|
||||
>
|
||||
</div>
|
||||
<ul>
|
||||
<survey-result
|
||||
|
@ -18,13 +20,41 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import SurveyResult from './SurveyResult.vue';
|
||||
|
||||
export default {
|
||||
props: ['results'],
|
||||
components: {
|
||||
SurveyResult,
|
||||
SurveyResult
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
results: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadExperiences() {
|
||||
axios
|
||||
.get(
|
||||
'https://vue-http-demo-8a928-default-rtdb.europe-west1.firebasedatabase.app/surveys.json'
|
||||
)
|
||||
.then(response => {
|
||||
const data = response.data;
|
||||
const results = [];
|
||||
for (const id in data) {
|
||||
results.push({
|
||||
id: id,
|
||||
name: data[id].name,
|
||||
rating: data[id].rating
|
||||
});
|
||||
}
|
||||
this.results = results;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
@ -34,4 +64,4 @@ ul {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
'use strict';
|
||||
|
||||
import { createApp } from 'vue';
|
||||
|
||||
import BaseCard from './components/UI/BaseCard.vue';
|
||||
|
|
Reference in New Issue