Vue.js axios delete 方法删除数组中的错误对象答案

【问题标题】：Vue.js Axios delete method deleting the wrong object in the arrayVue.js axios delete 方法删除数组中的错误对象
【发布时间】：2018-06-20 04:43:21
【问题描述】：

我有一个问题，我的 axios.delete 方法正在删除数组中的错误对象。总共有 3 个对象，来自一个 api，当我在 index.html 文件中删除时，id 为 2 和 3 的对象很好，但是当我在 index.html 文件中删除时，它会抛出一个“未捕获（承诺中）错误：请求失败，状态码 404”错误我尝试从我的 API 中删除数组中的第一个对象。

我的索引文件（包括删除按钮）

 <body>
        <div id="app">
          <template v-for="(results, index) in result">

              <div  class="card" style="width: 20rem; display:inline-block;">
                <div class="card-block">
                 <p>{{ results }}</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>

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

              </div>
              </div>

            </template>

        </div>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://unpkg.com/vue"></script>
        <script src="src/main.js"></script>

Main.js

var vm = new Vue ({
  el: '#app',
  data: {
    result: ''
  },

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

  methods: {

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

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

【问题讨论】：

标签： javascript vue.js vuejs2 axios

【解决方案1】：

如我所见，您将两个参数传递给您的 deleteData 方法。第二个参数是结果数组的索引，它不是您的真实结果 ID。

在这里，您只需将 deleteData 方法替换为：

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

正如您在上面看到的，我们刚刚将您的 id 更改为 result.id

【讨论】：

【解决方案2】：

改变

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

【讨论】：

【解决方案3】：

这是一个 404 错误，意味着它无法访问该页面。可能是链接不正确。请再看一遍网址！我也发生了同样的事情，然后我意识到我试图访问的 URL 不正确。

【讨论】：

如您所见，这个问题已经得到解答，而您的解决方案与其中的真正问题无关......