Question

我使用axios获取数据并将我的对象设置为新数据。我也首先用空值声明对象。

数据在我的Vue开发工具中正确显示，如果我在控制台中记录，但只要我在HTML中显示

<pre>{{myObj}}</pre>

显示旧的初始空数据

我的代码：

export default {
 data(){
  return {
   myObj: {
    foo: "",
    bar: "",
    loo: {},
    moo: [],
   }
  }
 },
 methods: {
  getData: function(){
   axios.get('/my/url')
   .then((response)=>{
     this.myObj = response.data;
     console.log("Response data: " , response.data); //**A**
     console.log("'This data:' " , this.data.purchaseorder); //**B**
   })
   .catch((error)=>{
    //ERROR
   });
  }
 }
}

答显示我的请求中的实际正确数据

B：显示我的请求中的实际正确数据

我尝试过的事情 我阅读了此文档https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

我看到他们说根对象不能被反应，所以我包裹了＃34; myObj＆＃34;在容器对象中。

myData: {
 myObj: {
  foo: "",
  bar: "",
  loo: {},
  moo: [],
 }
}

我已经取代了

this.myObj = response.data;

与

Vue.set(this.myData, 'myObj', response.data);

和

this.$set(this.myData, 'myObj', response.data);

没有任何作用！

我的主要问题是它在localhost上完美运行！我猜它与托管服务器上的小延迟有关而不是本地？

更新

以下是包含真实数据的图像

Vue component data (from the Vue dev tools)

Console.log data

HTML displayed data

更新2

根据要求，MCVE

<template lang="html">
<div>
  <table>
    <thead>
      <tr>
        <th>No</th>
        <th>Product</th>
        <th>Quantity</th>
        <th>Price / mt</th>
        <th>Order Total</th>
        <th>Currency</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(detail, idx) in purchaseorder.podetail">
        <td></td>
        <td>
          <input type="text" v-model="detail.product.product_name">
        </td>
        <td><input type="number" v-model="detail.po_qty"></td>
        <td><input type="number" v-model="detail.podetailcost.po_price"></td>
        <td><input type="number" v-bind:value="parseFloat(detail.po_qty * detail.podetailcost.po_price)"></td>
        <td>
          <input type="text" v-model="detail.podetailcost.currency.currency_description">
        </td>
      </tr>
    </tbody>
  </table>
</div>
</template>

<script>
export default {
  data(){
    return { //Just to initialize the Obj
      purchaseorder: {
        podetail: [
        {
          po_qty: "",
          podetailcost: [
            {
              po_price: "",
              currency: {currency_id:"", currency_description:""},
            },
          ],
        }
      },

  },
  props: ['po_id'],
  methods: {
    getData(){
      axios.get('/procurement/get/editdata/'+this.po_id)
      .then((response)=>{
        this.purchaseorder = response.data;
        console.log("Response data: " , response.data); //Displays fine
        console.log("This data: " , this.purchaseorder); //Displays fine
      })
      .catch((error)=>{
        //TODO
      });
    }
  },
  mounted(){
    this.getData();
  }
}
</script>

My desired result（这是我本地主机的屏幕截图，在MCVE中，我删除了很多，只是包含了最低限度。不要判断对象，我没有创建数据库，但是我得到了该格式的数据。

Answer 1

您是否调用了getData方法？它不会被Vue自动调用。您可以使用mounted或created生命周期挂钩来调用该方法。有些人喜欢这样，

 methods: {
  getData: function(){
   axios.get('/my/url')
   .then((response)=>{
     this.myObj = response.data;
     console.log("Response data: " , response.data); //**A**
     console.log("'This data:' " , this.data.purchaseorder); //**B**
   })
   .catch((error)=>{
    //ERROR
   });
  }
 },
 mounted () {
   this.getData()
 }

Answer 2

将getData方法更改为以下内容，而不是function：

methods: {
  getData () {
    axios.get('/my/url')
     .then(response => {
       this.myObj = response.data;
       console.log("Response data: " , response.data); //**A**
       console.log("'This data:' " , this.data.purchaseorder); //**B**
     })
     .catch(error => {
       //ERROR
     });
  }
}

在这种情况下，this的上下文绑定在getData: function () { ... }

中

我的Vue对象不是被动的。它在本地工作但不在托管服务器

2 个答案: