Вычисляемое свойство не определено в экземпляре, но используется во время рендеринга. - PullRequest
Новая
       11

Вычисляемое свойство не определено в экземпляре, но используется во время рендеринга.

0 голосов
/ 28 мая 2020

Фон:

У меня есть дочерний компонент, который получает массив с именем 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>

UPDATE

Свойство «costValue» в массиве «costButton» поступает из базы данных на бэкэнде с использованием ax ios

Родительский компонент 

<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":""}

]

Ответы [ 2 ]

0 голосов
/ 28 мая 2020

Постарайтесь помочь вам. Проблема будет в curr.expensesValue. Что такое CostValue? И еще один вопрос. Правильно ли вы монтируете свое приложение? У вас одинаковый идентификатор в root, как в 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>
0 голосов
/ 28 мая 2020

Попробуйте это 

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