Question

我无法更改计算属性中的变量qty。

getQuantity(){

                return (qtyId) =>  {

                    var qty = 0;
                    axios.get( window.location.origin + '/api/quantity/' + qtyId)
                    .then(res => {
                        console.log(res.data.qty)
                        qty = res.data.qty
                    })
                    .catch()

                    console.log(qty)
                    return qty

                }
            },

这是一个使用axios的异步请求。 console.log(res.data.qty)正常输出4但console.log(qty)为0。我认为这是因为异步请求......我怎样才能使它工作...... TY

Answer 1

我也经常遇到这个问题。有一个解决方法。尝试在vuejs中将“数据”添加到“数据”中，因此它会变为被动，也有匿名方法的另一种情况，所以也许尝试。

data() {
   return {
     qty: 0
   }
},
methods: {
getQuantity(){

   const self = this;

            return (qtyId) =>  {
                axios.get( window.location.origin + '/api/quantity/' + qtyId)
                .then(res => {
                    console.log(res.data.qty)
                    self.qty = res.data.qty
                })
                .catch()

                console.log(self.qty);
                return self.qty;

            }
        },

Answer 2

我认为这是因为异步请求

绝对是。

如果您不熟悉编写异步代码，我会先阅读（特别是承诺）。

console.log(qty)返回0，因为该代码在发送请求后立即执行，并且在响应从服务器返回之前执行。您传递给then的回调函数是响应从服务器返回后将执行的函数，只有这样您才能从响应数据中获取qty。

如果你想从该函数返回qty（这是你试图做的事情），那么该函数必须返回一个一旦解析后将包含qty值的promise（代码并未在JavaScript中被阻止，因此是承诺的原因。）

getQuantity() {
  return (qtyId) => {
    return axios.get(window.location.origin + '/api/quantity/' + qtyId)
    .then(res => {
      return res.data.qty;
    });
  }
},

为什么它是计算属性而不是方法？我认为不同的方法会更好，但我不确切知道这段代码如何适合您的项目。

变量在Vue.js中不会改变

2 个答案: