各位前端的大牛,请教一个Vue的问题

  • c
    cyberkiller
    先贴代码:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>货单详情</title>
    </head>
    <body>
    <div id="app">
    <div id="main">

    {{waybill.qwert}}

    </div>
    </div>
    </body>

    <script src="~/js/vue@2.6.12/dist/vue.js"></script>
    <script src="~/js/axios@0.21.1/dist/axios.js"></script>
    <script>


    var app = new Vue({
    el: '#app',
    data: function () {
    return {
    waybill: {

    },

    }
    },
    methods: {

    doQuery:function () {


    axios.post("@Url.Content("~/Waybill/GetWaybillInfo")", { waybill_id: 26 })
    .then(response => {

    this.waybill = response.data.waybill;
    this.waybill.qwert = "aa1";

    });


    //this.waybill.qwert = "aa2";

    },

    },
    mounted() {

    this.doQuery();

    }
    })
    </script>
    </html>


    --------------------------------------------------------------------
    为什么经过了ajax请求this.waybill.qwert可以在页面显示,qwert不是waybill的属性(ajax返回的数据百分百不包含该属性),在ajax之后加上去的,理论上是不显示的,为什么这里可以显示出来???
    注释掉那个ajax请求,直接this.waybill.qwert = "aa2"则按预期不显示。
  • 樱井敦司
    因为this.waybill被你整个替换了 iOS fly ~
  • c
    cyberkiller
    qwert是在替换后添加的,理论上他是非响应的
  • 樱井敦司
    回复3#cyberkiller
    建议你再去看看vue的原理和文档 iOS fly ~
  • H
    Hormone
    在axios外面声明个const _this=this
    然后在里面

    _this.waybill = response.data.waybill;
    这样应该可以,可以试一下 iOS fly ~
  • c
    clirochina
    1 我不知道你的业务需求,但是,这种对this.wallbill.qwert的赋值方式,在异步post存在的情况下,会由于时序和线程的缘故,导致结果不可控。
    2 楼上也提到了。在then里面,对于response的方法block中,将this.wallbill 重新赋值。导致,this.wallbill 已经没有指向原本的实体。 所以,没有qwert property存在,也是可能的。这里也有时序和线程的problem。

    不过,我都是在用react。 说错了的话,还请大神见谅。
  • l
    luxxxxxxx
    aa2也可以显示,只是没有重新渲染,aa1因为是异步的,重新渲染,所以显示出来了
    貌似现在的项目里aa2这种都可以直接渲染吧,有段时间不写,记不清了