Vuejs计算函数返回意外输出

Question

我正在尝试将 vue JS 中的道具的值设置为我在另一个类中的函数的输出。但是，当我调用此函数时，将返回函数的实际代码，而不是该函数的输出。这是我的代码以及我所指的屏幕截图。

在我的模板中

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

默认导出内

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

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

我想要 res.data[0].balance 中的值，但我不确定它为什么返回实际代码。我想补充一点，我还在学习 vuejs，在此之前没有使用过任何响应式框架。我曾尝试使用 watch: 而不是 computed: 但这会破坏 prop 值，表明它在渲染期间被引用，但未定义。即使我在 export default 的 data() 部分声明它。

Answer 1

如果你可以使用async/await ES6 特性：

在我的模板中

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

默认导出内

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

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

Answer 2

可以使用 before mount 方法更新 balance 并将 balance 的实际值存储在一个变量中

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>