vue数据更新问题

有一段json

{
    "MYSTORE1495160771842": {
        "sysAccount": "MYSTORE1495160771842",
        "commisionList": [
            {
                "amount": 0,
                "id": "",
                "remark": "",
                "type": 0,
                "value": 0
            }
        ],
        "accountName": "小店",
        "goodSlist": [
            {
                "id": "0A5FB212C296460DA2EB9463F799E310",
                "name": "康师傅蜂蜜绿茶500mL",
                "num": 3,
                "pntUnit": "瓶",
                "price": 3,
                "saleType": 0,
                "sales": "116",
                "pntUrl": "",
                "checked": true
            },
            {
                "id": "186518D16FFF4A56BF25AEEE82940BA4",
                "name": "南孚大号碱性电池1号",
                "num": 2,
                "pntUnit": "对",
                "price": 22,
                "saleType": 0,
                "sales": "112",
                "pntUrl": "",
                "checked": true
            }
        ],
        "total": 5,
        "totalFee": 53,
        "preBuyFee": 0,
        "serveFee": 0
    },
    "MYSTORE1494494134927": {
        "sysAccount": "MYSTORE1494494134927",
        "commisionList": [
            {
                "amount": 1,
                "id": "1BDF5A555138429989D1FA9A38D597FD",
                "remark": "",
                "type": 1,
                "value": 1
            },
            {
                "amount": 10,
                "id": "DD52908F70D146D49BA4DA3373695D30",
                "remark": "",
                "type": 1,
                "value": 0.6
            }
        ],
        "accountName": "苏宁",
        "goodSlist": []
    }
}

现在是只改变其中的num然后让视图重新渲染
现在的项目是前一个前端都是直接goodSlist.num=XXX直接赋值的,这样vue是不会重新渲染的
要怎么写才能重新渲染啊 用了以下方法

由于 JavaScript 的限制, Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如: vm.items.length = newLength
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果, 同时也将触发状态更新:
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
为了解决第二类问题,你也同样可以使用 splice:
example1.items.splice(newLength)

都不管用啊

阅读 4k
2 个回答

vue.set 也管用。不管用贴下你完整代码
链接描述

是管用的,刚给你个小demo看下http://runjs.cn/detail/01ws9sv5

链接可能太慢,给你源码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    </head>
    <body>
        <div id="app">{{list}}
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    list:[{a:1},{a:2}]
                },
                mounted:function(){
                    var vm =this;
                    setTimeout(function(){
                        var index = 1;
                        var item = vm.list[index];
                        item.a = 3;
                        vm.list.splice(index,1,item);
                    },2000);
                }
            });
        </script>
    </body>
</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题