Vuejs computed function returning unexpected output

Question

I am trying to set the value of a prop in vue JS to the output of a function I have in another class. However when I call this function, the actual code of the function is returned instead of the output of that function. Here is the code that I have along with the screenshot of what I am referring to.

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 getBalance(){
        axios.get(url + decoded.email).then((res)=> {
            console.log(res.data[0].balance);
            return res.data[0].balance;
        })
    }
}

I want the value from res.data[0].balance, but I am not sure why it is returning the actual code. I would like to add that I am still learning vuejs and have not used any reactive frameworks prior to this. I have tried using watch: instead of computed: but this breaks the prop value stating that it is referenced during render, but not defined. Even when I declare it in the data() section of export default.

@KevynKlava So I swapped to asyncComputed and referenced the prop in Data() however the value never updates from Data() — LukeR97
– LukeR97, Commented Apr 17, 2020 at 21:30
i am going to prepare one example so could help you, just a minute — Kevyn Klava
– Kevyn Klava, Commented Apr 17, 2020 at 21:32

Kevyn Klava · Accepted Answer · 2020-04-17 21:41:58Z

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>

answered Apr 17, 2020 at 21:41

Kevyn Klava

3161 silver badge7 bronze badges

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

1 Comment

LukeR97 Over a year ago

Okay so from some messing around with beforeMount and @BTL's suggestion I have got the value to return \o/ There is one issue however. If I log in as User1 their balance shows as 50. I then log out and log in as a new user. User1's balance still shows until I manually refresh my browser so it seems that the value doesn't update on a route change. Specifically it seems that the beforeMount function isn't firing when navigating to the route. Any idea what that could be?

BTL · Accepted Answer · 2020-04-17 21:41:36Z

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;
    }
}

Collectives™ on Stack Overflow

Vuejs computed function returning unexpected output

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related