How to set if else statement in script

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.

It looks like your router is passing a prop called editMode but I don't see that prop being defined or used by your component. Instead you seem to be using an unrelated data property called edit. — skirtle
– skirtle, Commented Jul 9, 2019 at 14:54

depperm · Accepted Answer · 2019-07-09 13:38:07Z

2

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')
    }
  }

answered Jul 9, 2019 at 13:38

depperm

10.8k4 gold badges46 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bboy Over a year ago

[Vue warn]: Property or method "edit" is not defined

depperm Over a year ago

I was assuming that it was defined as you referenced it in the OP. In js define edit: true (or false)

Bboy Over a year ago

after i press btn edit ---> it go to /edit/id ---> but show the create side ---> this is the code ---> export default { data(){ return { post:{}, edit:false } },

Collectives™ on Stack Overflow

How to set if else statement in script

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related