[Vuejs]-Get and show a sum of from a column in Vue through an API

by

0👍

According to your code, you are setting info with the result of axios.get(...) the result of your REST call is response = { TotalAmount: "2645.09" }

You have several problemes here:

  1. When you write then(response => (this.info = response)) info is not equal to the REST call response, but to the object returned by axios. if you want info to be equal to the REST call data, you need to set info with response.data or using object destructuring (then({ data } => (this.info = data)))
  2. In your template you refer only to TotalAmount which is not a known attribut of your component

Update your component like this:

<template>
  <div>
    <span>{{ totalAmount }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: undefined,
    };
  },
  async mounted() {
    const { data } = await axios.get('https://api_url.php');
    this.info = data;
  },
  computed: {
    totalAmount() {
      return this.info?.TotalAmount;
    },
  },
};
</script>

Here I used a computed property totalAmount in order to avoid error like ‘Cannot read property TotalAmount of undefined’

Leave a comment