javascript - 我的 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
   });
  }
 }
}

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

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 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 生命周期 Hook 来调用该方法。像这样的东西，

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