[Vuejs]-Vuejs computed function returning unexpected output

by

2👍

✅

You can use the before mount method to update the balance and store the actual value of balance in a variable

new Vue({
  el: "#app",
  data: {
    balance: 0
  },
  beforeMount: function() {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(c => {console.log(c); return c})
      .then(value => this.balance = value.userId)
  },
  
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <nav>
      <ul>
          <li>Balance {{ balance }} </li>
      </ul>
  </nav>
</div>
👤Kevyn Klava

1👍

If you can use async/await ES6 feature :

Within my template

<nav>
      <ul>
          <li><router-link to="/games">All Games</router-link></li>
          <li><modal-deposit>Deposit</modal-deposit></li>
          <li @click="logout"><router-link to="/">Logout</router-link></li>
          <li>Balance {{ updateBalance }} </li>
      </ul>
</nav>

Within export default

computed: {
    updateBalance: function() {
      return WalletService.getBalance();
    }
}

Within WalletService.js

class WalletService{
    // Get the balance from our logged in wallet
    static async getBalance() {
      const res = await axios.get(url + decoded.email);
      console.log(res.data[0].balance);
      return res.data[0].balance;
    }
}
👤BTL

Leave a comment