我的 Vue 對象不是反應式的。 它在本地工作，但不在托管服務器上

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
   });
  }
 }
}

A：根據我的請求顯示實際正確的數據

B：根據我的請求顯示實際正確的數據

我嘗試過的事情：我閱讀了這個文檔https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

我看到他們說根對象不能是反應性的，所以我將“myObj”包裝在一個容器對象中。

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

我已經更換了

this.myObj = response.data;

和

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

和

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

沒有任何作用！

我的主要問題是它在本地主機上運行良好！ 我猜這與托管服務器上的小延遲有關，而不是本地？

更新

這是帶有真實數據的圖像

Vue 組件數據（來自 Vue 開發工具）

Console.log 數據

HTML 顯示數據

更新 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>

我想要的結果（這是來自我的本地主機的屏幕截圖，在 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 () { ... }