無法刪除數組中的項目

Question

我正在嘗試獲取 API 及其工作，但是當我嘗試使用方法“ .pop() ”或“ .slice(0,4 )”刪除最后一個數組時，它顯示：未捕獲（承諾）類型錯誤：數據。 body.data.pop 不是函數

這是 codeandox https://d8i7m.csb.app/ 上代碼的鏈接

我正在使用 vue 和 vue-resource

<template>
  <div class="hello">
    <ol>
      <li v-for="blog in blogs" :key="blog.id">{{ blog }}</li>
    </ol>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      blogs: [],
    };
  },

  created() {
    this.$http
      .get("https://covidnigeria.herokuapp.com/api")
      .then(function (data) {
        this.blogs = data.body.data;
        console.log(data.body.data);
      });
  },
};
</script>

這是我工作的圖片

我想刪除第 6 個數組，只顯示 1-5

我是在應用程序中使用 API 的新手。

Answer 1

查看從您的 API 返回的實際數據。 它不是一個數組

{
  "data": {
    "totalSamplesTested": "535733",
    "totalConfirmedCases": 59345,
    "totalActiveCases": 7464,
    "discharged": 50768,
    "death": 1113,
    "states": [/* lots of data here */]
  }
}

我建議你按鍵顯示你想要的數據

<ol>
  <li>{{ blogs.totalSamplesTested }}</li>
  <li>{{ blogs.totalConfirmedCases}}</li>
  <li>{{ blogs.totalActiveCases}}</li>
  <li>{{ blogs.discharged}}</li>
  <li>{{ blogs.death}}</li>
</ol>

如果您仍想迭代數據並跳過states ，請創建一個計算屬性，該屬性返回省略states所有內容並迭代該屬性

<ol>
  <li v-for="stat in stats" :key="stat.key">
    {{ stat.label }}: {{ stat.dataPoint }}
  </li>
</ol>

data: () => ({
  blogs: {} // 👈 an empty object, not an array
}),
computed: {
  stats: ({ blogs }) => {
    const { states, ...stats } = blogs
    return Object.entries(stats).map(([ key, dataPoint ]) => ({
      key,
      dataPoint,
      label: `${key[0].toUpperCase()}${key.slice(1).replace(/[A-Z]/g, " $&")}`
    }))
  }
}