Skip to content

Instantly share code, notes, and snippets.

@otabekoff
Last active February 29, 2020 05:46
Show Gist options
  • Save otabekoff/3df9eb6ac860102978aa98c801f1689a to your computer and use it in GitHub Desktop.
Save otabekoff/3df9eb6ac860102978aa98c801f1689a to your computer and use it in GitHub Desktop.
<div v-for="trend in trends" :key="trend.id"></div>
<script>
data() {
return {
trends: [],
}
},
created() {
this.$axios.get(
"https://api.myjson.com/bins/188hw8"
).then((response) => {
this.trends = response.data
})
}
</script>
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Vue Axios Post - ItSolutionStuff.com</div>
<div class="card-body">
<form @submit="formSubmit">
<strong>Name:</strong>
<input type="text" class="form-control" v-model="name">
<strong>Description:</strong>
<textarea class="form-control" v-model="description"></textarea>
<button class="btn btn-success">Submit</button>
</form>
<strong>Output:</strong>
<pre>
{{output}}
</pre>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
data() {
return {
name: '',
description: '',
output: ''
};
},
methods: {
formSubmit(e) {
e.preventDefault();
let currentObj = this;
this.axios.post('http://localhost:8000/yourPostApi', {
name: this.name,
description: this.description
})
.then(function (response) {
currentObj.output = response.data;
})
.catch(function (error) {
currentObj.output = error;
});
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment