1

我使用 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://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 中我删除了很多内容，只包含了最低限度的内容。不要判断对象，我没有创建数据库，但我以该格式获取数据。

4

2 回答 2

0

将方法更改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 () { ... }

于 2018-02-17T09:38:31.940 回答
0

你有调用那个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()
 }
于 2018-02-17T09:00:50.557 回答