计算属性未在实例上定义，但在渲染期间引用

Question

背景：

我有一个子组件，它接收一个名为 expenseButton 的数组作为道具。在数组中是具有值的对象，我试图获得使用 array.reduce()

的总和

问题

当我使用方法来获取值的总和时，它工作得非常好，但是当我尝试将其设为计算属性时，我收到一个错误消息：

（“test”是计算属性的名称）

属性或方法“test”未在实例上定义，但在渲染期间被引用

<script>
export default {
  props: {
    expenseButton: Array,
  },
  data() {
    return {
      chosenExpenseId: null
    };
  },
    computed: {
      test() {
        return this.expenseButton.reduce((acc, curr) => {
          acc += curr.expensesValue;
          return acc;
        }, 0);
      }
    }
  }
};
</script>

<template>
<div>
<div class="yourBalance">
      Your monthly balance
      <br />
      <span>${{ test }}</span>
    </div>
</div>
<template>

更新

“expenseButton”数组中的“expenseValue”属性来自使用 axios 的后端数据库

父组件

<template>
<div>
   <expense-button :myExpense="myExpense" :expenseButton="expenseButton"></expense-button>
</div>
</template>

<script>
import Expenses from "../components/expenses.vue";
import axios from "axios";

export default {
  components: {
    "expense-button": Expenses
  },
  data() {
    return {
      budgetOwner: "",
      myExpense: [],
      expenseButton: [],
      component: "",
      errored: false
    };
  },
beforeRouteEnter(to, from, next) {
    axios
      .get("/api/budget", {
        headers: { "Content-Type": "application/json" },
        withCredentials: true
      })
      .then(res => {
        next(vm => {
          if (res.data.budget.length > 0) {
            vm.myExpense = res.data.budget;
            vm.expenseButton = res.data.budget[0].expenses;
          } 
        });
      })
      .catch(err => {
        next(vm => {
          console.log(err.response);
          vm.errored = true;
        });
      });
  }
}
</script>

数据库中的数据

"budget":[{"expenses":[

{"expensesKey":"a","expensesValue":1,"subExpenses":"","newValue":""},

{"expensesKey":"b","expensesValue":2,"subExpenses":"","newValue":""},

{"expensesKey":"c","expensesValue":3,"subExpenses":"","newValue":""}

]

Answer 1

试试这个

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

Answer 2

试着帮助你。问题出在curr.expensesValue。什么是费用价值？还有一个问题。您的应用安装正确吗？在我的示例中，您是否在根目录中具有相同的 id，例如 el:'#app' 和 div#id？

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>