Vuejs вычислил, сделайте его реактивным

Мне нужно сохранить вычисленное значение в моей базе данных, но, похоже, я не могу получить к нему доступ с помощью следующего примера:

computed: {
    total: {
        get: function() {
            return this.items.reduce(
                (acc, item) => acc + (item.price * item.quantity) * (1 - item.discount/100), 0
            )
        },
        set: function(newValue) {
            console.log(newValue);
            // this.tototata = newValue;
        }
    }
},

В шаблоне вычисленное значение работает хорошо, но в консоли ничего не отображается

Я работаю с vue 2.6.11

Это лучший способ сделать это? Стоит ли использовать методы?


vue.js computed-properties vuejs2 mutators
person mchev    schedule 26.01.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, что computed setter вызывается при ручной установке вычисленного значения. Например, сеттер сработает, если вы сделаете что-то вроде this.total = newTotal. Чтобы сохранять вычисленное значение в базе данных всякий раз, когда оно обновляется, вы можете настроить наблюдатель:

computed: {
  total: {
    get: function() {
      return this.items.reduce(
        (acc, item) => acc + (item.price * item.quantity) * (1 - item.discount / 100), 0
      )
    }
  }
},
watch: {
  total(newValue) {
    // Save to database
  }
}

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

person Andrew Bui    schedule 26.01.2020
comment
Спасибо, мне пришлось вынести наблюдателя за пределы вычисляемой функции, но он отлично работает. - person mchev; 26.01.2020
comment
Ага, извини, это была моя ошибка. Это действительно должно быть снаружи. Рад, что помог! Я обновил ответ, кстати. - person Andrew Bui; 26.01.2020
comment
Все еще интересно, почему пример в документе не работает vuejs.org/v2/ guide / computed.html # Computed-Setter - person mchev; 26.01.2020
comment
Вы можете взглянуть на небольшой пример, который я только что написал здесь: jsfiddle.net/k7zw3na5/6 . - person Andrew Bui; 26.01.2020