Computed function return null - problem with fetch?

Question

I am new in JS (and vue too) and have problem witch fetch data. My target is - want to save all data from API and using them in functions.

Code:

<div>{{ dotToComma }} kg</div>

Vue:

export default {
  data() {
    return {
      weight: null
    };
  },

  created() {
    this.api();
  },

  methods: {

    //this is working correctly
    async api() {
      const api = await fetch("/reporting/patient/values");
      const data = await api.json();
      this.weight = Math.round(data.weight * 10) / 10
    }
  },

  computed: {
    //this.weight is still null
    dotToComma() {
      return this.weight.replace(".", ",");
    }
  }
};

Where is the problem? Thank you

UPDATE:

function replace in dotToComma is working only for strings, so you have to add toString() function:

return this.weight.toString().replace(".", ",");

Not worked on Vue.. may be try to call dotToComma with () like <div>{{ dotToComma() }} kg</div> — Karthikeyan
– Karthikeyan, Commented Mar 3, 2021 at 10:42

Asimple · Accepted Answer · 2021-03-03 10:39:05Z

2

Async functions won't give you result instantly, so you need to check do you have this.weight, or not. Computed will use new value, when it come. You can read more about JS async realization here

answered Mar 3, 2021 at 10:39

Asimple

6503 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Computed function return null - problem with fetch?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related