CODEWITHSUNDEEP
javascriptvue.jsvuejs2axios
themanwiththemasterplan
themanwiththemasterplan

Reputation: 411

Posting Object to Api using Vue.js and Axios

I'm trying to post a new object to my api array using axios and Vue.js. I'm trying to add the functionality to add a new object and display it on the timeline. I can see that when I post a new title I get a console.log of the object but it is not added to the correct array from the api, there is no new id associated with the new object.

Index.html

<body>
<div id="app">

    <template>
        <form @submit.prevent>   
        <input type="text" v-model="postBody"/>
        <button type="button" class="btn btn-primary pull-right" data-toggle="modal" @click="postPost()">Post Title</button>
      </form>
        <ul v-if="errors && errors.length">
          <li v-for="error of errors">
            {{error.message}}
          </li>
        </ul>
    </template>

    <br>

    <!-- <p>{{ status }}</p> -->

  <template v-for="(results, index) in result">

      <div  class="card" style="width: 20rem; display:inline-block;">
        <div class="card-block">
          <p>{{ results.id }}</p>
         <p>{{ results.title }}</p>
         <!-- <button type="button" class="btn btn-danger pull-right" data-toggle="modal" v-on:submit.prevent="deleteData(index)" @click="deleteData(results, index) in result">Delete</button> -->

         <button type="button" class="btn btn-danger pull-right" data-toggle="modal" @click="deleteData(results, index)">Delete</button>

     <h1> {{ results.comments}} </h1>

        </div>
      </div>
    </template>

</div>
</body>

Main.js

  var vm = new Vue ({
  el: '#app',
  data: {
    result: '',
    title: '',
    data: '',
    postBody: '',
    User: { title: '' },
    errors: []
  },

  created: function(){
    this.getResult();
  },

  methods: {

    getResult: function() {
      // this.results = 'Loading...';
      axios.get('https://my-json-server.typicode.com/shaneogrady/json/db')
      .then(response => {
        // console.log(response.data);
        this.result = response.data.posts;
        console.log(this.result);
      });
    },

    deleteData: function(result, id) {
      axios.delete('https://my-json-server.typicode.com/shaneogrady/json/posts/' + result.id)
      .then(response => {
        this.result.splice(id, 1)
        console.log(this.result);
      });
    },

    postPost() {
      axios.post('https://my-json-server.typicode.com/shaneogrady/json/posts/', {
        // id: 4,
        // title: 'Shane',  
        body: this.postBody
      })
      .then(response => { console.log(response.data); this.result.push(response.data) })
      .catch(e => {
        this.errors.push(e)
      })
    }

  }
  });

Upvotes: 2

Views: 8573

Answers (2)

Thamer
Thamer

Reputation: 1954

if u need to get results after creation of new object u just need to call ur getResult function inside postPost function

like this : 

postPost() {
  axios.post('https://my-json-server.typicode.com/shaneogrady/json/posts/', {
    // id: 4,
    // title: 'Shane',  
    body: this.postBody
  })
  .then(response => {
    this.getResult();
    console.log(response.data);
  })
  .catch(e => {
    this.errors.push(e)
  })

Upvotes: 1

Georgi Antonov
Georgi Antonov

Reputation: 1661

Try adding @submit.prevent on the form element

<div id="app">
        <form @submit.prevent>   
            <h4> Add Title</h4>

            <div class="form-group">
              <label class="pull-left"> Title </label>
              <input type="text" class="form-control" placeholder="Title " v-model="User.title">
            </div>
          <button type="submit" class="btn btn-large btn-block btn-primary" @click="postPost">Submit</button>
    </form>
...

Upvotes: 1

Related Questions