[Vuejs]-Computed property is not defined on the instance but reference during render

by

0👍

Try this

test() {
    if(this.expenseButton){
        return this.expenseButton.reduce((acc, curr) => {
          acc += curr.expensesValue;
          return acc;
        }, 0);
      }
    else{
        return ''
    }
}

0👍

Try to help you. The problem will be in curr.expensesValue. What is expensesValue? And one more question. Are you mount right your app? Are you have the same id in the root like a el:'#app' and div#id in my example?

new Vue({
  el: "#app",
  data:{
  expenseButton:[1,2,3,4,5],
      chosenExpenseId: null
  },
    computed: {
      test() {
        return this.expenseButton.reduce((acc, curr) => acc + curr)
      }
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="yourBalance">
      Your monthly balance
      <br />
      <span>{{ test }}</span>
  </div>
</div>

Leave a comment