Recently, I started working with vuejs 3 and json. My goal is to update a course, however, despite my efforts, the fields for the course (title and content) remain empty with no errors being displayed. In views/blog/OnePost, I am passing the ID of the course as a props.
/views/blog/Edit.vue
<template lang="">
<div class="row my-4">
<div class="col-md-6 mx-auto">
<h1 class="my-2">New Post</h1>
<form @submit.prevent="editPost">
<div class="form-group">
<label for="Title">Title</label>
<input v-model="post.title" id="title" type="text" class="form-control">
</div>
<div class="form-group">
<label for="Content">Content</label>
<textarea v-model="post.content" id="content" rows="3" class="form-control"></textarea>
</div>
<button class="btn btn-block btn-warning">update</button>
</form>
</div>
</div>
</template>
<script>
export default {
props: ['id'],
data() {
return{
url: `http://localhost:5000/posts/${this.id}`,
post : {
title: '',
content: ''
}
}
},
methods: {
editPost() {
if(this.post.title == '' || this.post.content == ''){
return;
}
fetch(this.url, {
method: 'PUT',
headers: {'Content-Type' : 'application/json'},
body: JSON.stringify(this.post)
})
.then(res => res.json())
.then(data => this.$router.push('/blog'))
.catch(err => console.log(err.message))
}
},
mounted() {
fetch(this.url)
.then(res => res.json())
.then(data => {
this.post = data
})
.catch(err => console.log(err))
}
}
</script>
/views/blog/OnePost.vue
<router-link :to="{ name: 'post-edit', params: { id: post.id }}" class="btn btn-sm btn-warning ml-3">edit</router-link>