How to Use Vue with Axios to Make a PUT Request
Jun 17, 2021
With a few lines of code, you can easily make an axios.put() request with Vue:
<div id = "content"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>
const app = new Vue({
data: () => ({result: null}),
template: `
<div>
<button @click="makeRequest">Make Request</button>
<div>Result is: {{result}}</div>
</div>
`,
methods: {
async makeRequest() {
const res = await axios.put('https://httpbin.org/put', {hello:'world'});
this.result = res.status;
}
}
});
app.$mount("#content");
</script>You should use axios.put() calls in Vue methods, or in a watcher. Do not make HTTP requests in computed properties!
Vue School has some of our favorite Vue
video courses. Their Vue.js Master Class walks you through building a real
world application, and does a great job of teaching you how to integrate Vue
with Firebase.
Check it out!
Did you find this tutorial useful? Say thanks by starring our repo on GitHub!