Question

我试图使用axios和Vue.js将新对象发布到我的api数组中。我尝试添加添加新对象的功能并在时间轴上显示。我可以看到，当我发布一个新标题时，我得到了一个对象的console.log，但它没有从api添加到正确的数组中，没有与新对象关联的新id。

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

  }
  });

Answer 1

尝试在表单元素上添加@ submit.prevent

<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>
...

Answer 2

如果您需要在创建新对象后获得结果，则只需在getResult函数内调用ur postPost函数

像这样：

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

使用Vue.js和Axios将对象发布到Api

2 个答案: