Vue. js вычисленное значение, возвращающее неопределенное

Question

У меня были проблемы с выяснением, что я делаю неправильно с этим кодом.

    name: 'StatementInfo',
    data() {
        return {
            currentStatement: {
                client: '',
                clientEmail: '',
                date: '',
                hours: '',
                hourlyRate: '',
                total: this.calcTotal
            }
        }
    },
    computed: {
        calcTotal () {
            return parseInt(this.hours) * parseInt(this.hourlyRate)
        }
    },
    methods: {
        saveForm () {
            console.log(this.currentStatement)
            this.$emit('save-form', this.currentStatement)
        },
  }

Консоль, регистрирующий this.currentStatement, приводит к тому, что общее число не определено, но с точки зрения младших разработчиков, я бы предположил, что это сработает. Могут ли какие-нибудь более опытные люди взглянуть на это и сказать, что это может быть?

Answer 1

Попробуйте назначить значения по умолчанию для this.hours и this.hourlyRate = 0, возможно, когда вы выполняете saveForm (), эти переменные равны нулю или не определены

Answer 2

Реакционная способность работает не так по отношению к computed methods.

Содержание data оценивается один раз, и в этот момент this.calcTotal не определено. Это значение будет оставаться таким до тех пор, пока вы его не обновите.

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

Поэтому используйте calcTotal вместо total.