I am seeking guidance on utilizing 'axios' within 'nuxt.js'. I have experimented with sample data, and I am particularly interested in learning how to utilize the 'axios' method within 'nuxt.js' using TypeScript.
The post method was successful, which led me to believe that the delete method would follow a similar code pattern as the post method. However, when attempting the delete method, it did not function as expected. I am unsure of how to resolve this issue. Does anyone have any insights? The relevant code is displayed below.
<template>
<div>
<v-row>
<v-col cols="3">
<v-text-field v-model="name"></v-text-field>
</v-col>
<v-col cols="3">
<v-btn @click="createNewUser">CreateNewUser</v-btn>
</v-col>
</v-row>
<v-row>
<v-col>
<ul>
<li v-for="user in users" :key="user.id">
{{user.name}}
<v-btn @click="deleteUser(user.id)">DeleteUser</v-btn>
</li>
</ul>
</v-col>
</v-row>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
import axios from "axios";
@Component({})
export default class extends Vue {
users: object[] = [];
name: string = "";
async mounted() {
axios.get("https://jsonplaceholder.typicode.com/users",{params:{name:'Glenna Reichert'}})
.then(response=>this.users = response.data)
.catch(response=>console.log(response));
axios
}
createNewUser() {
axios
.post("https://jsonplaceholder.typicode.com/users", { name: this.name })
.then((response) => this.users.unshift(response.data))
.catch((response) => console.log(response));
}
deleteUser(id: any) {
axios
.delete("https://jsonplaceholder.typicode.com/users"+id)
.then((response) => console.log(response))
.catch((response) => console.log(response));
}
}
</script>