Question

我正在使用Vue.js版本2，尝试更新视图中使用的变量。

请耐心等待，我有以下代码：

new Vue({
    el: '#products',

    data: {
       showProductModal: false,
       product: {}

    },

    methods: {

      retrieveProduct(id) {
        axios.get('/product/'+id).then(function (response) {
            this.product = response.data;
            console.log(this.product);
        });
      }
  }

请注意：

product 变量初始化为空对象{};
用户单击按钮后调用“retrieveProduto（）”方法。然后进行API调用，并在promise解析后更新 product 变量。
我使用axios发出http请求，并返回响应对象，其中 response.data 是返回对象的内容。

console.log（this.product）导致

{id：1，名称：“柠檬蛋糕”，描述：“传统柠檬蛋糕”，pic_url：“”，category_id：1，...}

这正是预期的输出。但是，在视图中调用{{product}}后，模板不会以任何方式更新，并永远陷入{}。

我还测试了双向数据绑定是否有效，答案是肯定的。实际上，一切都与此完全不同。难道我做错了什么？从promise中检索对象后，我是否应该期望模板未更新？

感谢任何帮助。提前谢谢。

修改

我称之为变量的模板部分只是{{product}}用于测试目的。
我打电话给 self 的原因是我在第一次尝试时使用了 this.product 。我已经看到了solution elsewhere并改变了它，所以我可以试一试。由于它不起作用，我将其改回 this
打印 console.log（this）返回完整的Vue对象，并且 product 属性设置正确，但仍未反映在模板中。

Answer 1

由于缺乏声明或范围问题，您可能会遇到self的问题。请尝试以下方法：

retrieveProduct(id) {
    var this_vue_instance = this;
    axios.get('/product/'+id).then(function (response) {
        this_vue_instance.product = response.data;
        console.log(this_vue_instance.product);
    });
}

Answer 2

我认为这应该是范围界定的一些问题。试试这个：

  retrieveProduct(id) {
    axios.get('/product/' + id).then(response => {
      this.product = response.data;
    });
  }

然后使用vue-devtools检查数据是否已正确更改。

从网址

2 个答案: