vue.js - 关于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

这篇关于vue.js - 关于vue模版视图渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！