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请求中使用arrow function。否则，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);
                    });
            }
        }
    }

计算方法无法识别更新的数据

2 个答案: