关于vue模版视图渲染

图片描述

图片描述

图片描述

各位帮忙看一下哈。
第一张图是我写的一个vue模版,
第二张图是列表渲染,里面的item数据会传到第一张图的模版里,
第三张图是我用props、data、computed做的尝试。
需求就是我在payForTable中改变Item.totalAmount的值,第一张图第二个p元素的内容能根据这个值对应改变。
现在问题是,这个值确实变了,通过最后一行打印出来看到的,可是页面渲染表现没有改变。
我尝试把props换成data,换成computed都不变,不知道什么原因,很急人。
求懂的人来解答一下,感谢。

图片描述

payForTable:function(e,i){

        var _target = $(e.currentTarget);
        var Item = this.msg;
        var _tableName = this.msg.tableName;
        var _price = this.msg.totalAmount;
        if(Item.status==2 && confirm("确定"+_tableName+"号桌,付款"+_price+"元吗?") ){
            var _data = {
                paymentChannel:0,
                tableId:Item.id,
                totalAmount:Item.totalAmount || 0,
                openId:"123"
            }
            console.log(JSON.stringify(_data),Item.status);
            $.ajax({
                type:"post",
                url:"http://dev.superchong.com:9999/restaurants/3/orders/"+ Item.orderId +"/payments",
                async:true,
                dataType:'json',
                contentType:"application/json",
                data:JSON.stringify(_data),
                success:function(callback){
                    console.log(callback);
                    Item.totalAmount = 0;
                    Item.status=0;
                    _target.removeClass('table_item_ordered');
                    _target.children('.item_totalAmount').html('');
                    alert("结单成功!")
                },
                error:function(err){
                    console.log(err);
                    if(JSON.parse(err.response).error=="Cannot pay for a paid or cancelled order!"){
                        alert("此单已经结过或取消,请勿重复提交")
                    } else {
                        alert("结单失败,请重试一次")
                    }
                }
            });
        } else {
            alert("此桌子不是已下单未付款状态,无法付款")
        }
    },
请输入代码

回答:

改寫了下,正常運行,組件要用 Vue.component('組件名稱', {...}) ,而不是 Vue.extend({...})

裡邊把 Ajax請求 改成用 setTimeout 模擬下,你再改回去就好了
jsFiddle

回答:

换成:msg.sync试试

回答:

为什么不直接写this.msg.totalAmount = 0;,这样不可以么?就别搞什么computed

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注