Fatal编程技术网
  • javascript/
  • Javascript 使用Vue.js和Axios将对象发布到Api

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

javascript vue.js vuejs2

Javascript 使用Vue.js和Axios将对象发布到Api,javascript,vue.js,vuejs2,axios,Javascript,Vue.js,Vuejs2,Axios,我正在尝试使用axios和Vue.js将一个新对象发布到我的api数组中。我正在尝试添加功能，以添加新对象并将其显示在时间轴上。我可以看到，当我发布一个新标题时，我得到了该对象的console.log，但它没有从api添加到正确的数组中，因此没有与新对象关联的新id Index.html <body> <div id="app"> <template> <form @submit.prevent> &

我正在尝试使用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>
尝试在表单元素上添加@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>
...


添加标题
标题
提交
...
如果创建新对象后需要获得结果，只需在
post
函数中调用ur
getResult
函数即可

像这样：

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)
  })
您确定后端处理post请求并添加到数据库中吗？它似乎只是挂起。应该挂起，但即使是这样，新对象也没有被分配id。我不确定当您使用VueJS时，这是一件有趣的事情；我以前遇到过这个问题，可能是一个bug，但是，删除
和
标记，修复了此类问题。你好@Hackerman，谢谢你的回复。但我还是有同样的问题。理想情况下，我只想在新对象创建后在页面上显示它，但它似乎不起作用。无法联机找到任何文档来修复错误OK，您只是在
postPost
方法中丢失了一段代码。请将其替换为此
。然后（response=>{console.log（response.data）；this.result.push（response.data）}）
…如果这是您想要完成的，我可以将其作为答案发布：）您好，谢谢您的回答，我还不能调用此函数，因为新创建的对象未添加到数组中。因此，调用此函数将从页面中删除新对象，并引入当前存储在数组中的对象。我正在尝试将新创建的对象添加到api中。我无法删除新对象，因为它们没有唯一的id。 
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)
  })