[Vuejs]-Cannot remove the item in an array

by

1👍

✅

Look at the actual data coming back from your API. It is not an array

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

I suggest you display the data you want by its key

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

If you still want to iterate the data and skip states, create a computed property that returns everything with states omitted and iterate that

<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, " $&")}`
    }))
  }
}

Leave a comment