Вычисленный метод не распознает обновленные данные

Question

Я пытаюсь использовать вычисленный метод total, это вычислить количество слов и умножить на price. price получается с помощью метода доступа к API. Но вычисленный метод не использует обновленные данные price. Возвращается пустым.

var app = new Vue({
  el: '#app',
  data: {
    text: '',
    qualidade: '',
    selected: '',
    options: [],
    lang1: '',
    lang2: '',
    ola: '',
    price: ''
  },
  beforeCreate: function() {
      axios.get('/languages.json')
        .then((response) => {
            this.options = response.data
        })
  },
  computed: {
      total: function() {
          return (this.words * this.preco).toLocaleString('de-DE')
      },
      words: function() {
        if(this.text.length == 0) {
            return 0
        } else {
            this.words = this.text.split(' ').length
            console.log(this.words)
            return this.text.split(' ').length
        }
      }
  },
  methods: {
      price: function () {
        axios.post('/service/price', {
            lang_origem: this.lang1,
            lang_dest: this.lang2
        })
        .then(function (response) {
            this.preco = response.data.price
            console.log(this.price)
        })
        .catch(function (error) {
            console.log(error);
        });
      }
  }
})

Answer 1

Проблемы, которые я могу видеть в ваших кодах,

• И данные, и методы имеют свойство с именем price, они будут конфликтовать.
• preco не реагирует. Если он не реагирует, изменение его значения не приведет к обновлению вычисленных значений, которые зависят от него. Вы должны добавить preco к данным, чтобы сделать их реактивными.
• Вы должны использовать функцию стрелки в запросе axios. В противном случае this в this.preco = ... не будет ссылаться на экземпляр Vue

Answer 2

this.preco будет пустым до тех пор, пока вызов сервера (axios.post('/service/price' ...) не завершен, вам необходимо переписать это для метода, который обновляет this.total Примерно так:

{
        methods: {
            calcTotal: function () {
                this.price()
                    .then(() => {
                        this.total = (this.words * this.preco).toLocaleString('de-DE')
                    })
            },

            price: function () {
                //return so that we can wait on this to be finished
                return axios.post('/service/price', {
                        lang_origem: this.lang1,
                        lang_dest: this.lang2
                    })
                    .then(function (response) {
                        this.preco = response.data.price
                        console.log(this.price)
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    }