How to set if else statement in script - laravel

Question

-I wan't to do like this: if(!editMode) show create page else show update page because my create and edit using same form so I combine it.
-I'm learning online tutorial but the tutorial show create and edit seperately.
-Please Helps and Thank/.\
<template>
<div v-if="!edit">
<h1>Create Post</h1>
<form #submit.prevent="addPost">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Title:</label>
<input type="text" class="form-control" v-model="post.title">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Body:</label>
<textarea class="form-control" v-model="post.body" rows="5"></textarea>
</div>
</div>
</div><br />
<div class="form-group">
<button class="btn btn-primary">Create</button>
</div>
</form>
</div>
<div v-else>
<h1>Update Post</h1>
<form #submit.prevent="updatePost">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Title:</label>
<input type="text" class="form-control" v-model="post.title">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Body:</label>
<textarea class="form-control" v-model="post.body" rows="5"></textarea>
</div>
</div>
</div><br />
<div class="form-group">
<button class="btn btn-primary">Update</button>
</div>
</form>
</div>
</template>
<script>
export default {
data(){
return {
edit:false,
post:{}
}
},
},
//this is for create
methods: {
addPost(){
let uri = 'http://localhost:8000/post/create';
this.axios.post(uri, this.post).then((response) => {
this.$router.push({name: 'posts'});
});
},
},
//this is for get data before update
created() {
let uri = `http://localhost:8000/post/edit/${this.$route.params.id}`;
this.axios.get(uri).then((response) => {
this.post = response.data;
});
},
//this is for update post
updatePost() {
let uri = `http://localhost:8000/post/update/${this.$route.params.id}`;
this.axios.post(uri, this.post).then((response) => {
this.$router.push({name: 'posts'});
});
}
</script>
**I also set this in my app.js**
{
name: 'create',
path: '/create',
component: PostForm,
props: {editMode: false}
},
{
name: 'edit',
path: '/edit/:id',
component: PostForm,
props: {editMode: true}
}
My Error--->when I press edit btn show create page and using addPost function.
Result--> how to use if else to solve this.... Sorry I'm rookie in programming.

Answer 1

I believe you can simply have the js figure out the add or update.
<template>
<div>
<h1 v-if="!edit">Create Post</h1>
<h1 v-else>Update Post</h1>
<form #submit.prevent="postSomething">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Title:</label>
<input type="text" class="form-control" v-model="post.title">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Body:</label>
<textarea class="form-control" v-model="post.body" rows="5"></textarea>
</div>
</div>
</div><br />
<div class="form-group">
<button v-if="!edit" class="btn btn-primary">Create</button>
<button v-else class="btn btn-primary">Update</button>
</div>
</form>
</div>
</template>
and the js:
methods: {
postSomething(){
if(!this.edit){
this.addPost()
}else{
this.updatePost()
}
},
addPost(){
console.log('should add')
},
updatePost(){
console.log('should update')
}
}