vue 嵌套结构v-model数据不实时更新

如下图后端数据
image.png
我们需要处理成如下图适配的结构
image.png


js

export default {
    data() {
        return {
            tableData: [],
        }
    },
    methods:{
        setTableData(data) {
             let result = [];
             const _ = this;
             function setChildren(ele) {
             let objChildren = [];
                 const actions = new Map([['cpu', 'CPU'], ['memory', '内存'], ['disk', '磁盘']]);
                 ['cpu', 'memory', 'disk'].forEach((item, index) => {
                 let Obj = {
                     title: actions.get(item),
                     available: ele[item + '_available'],
                     quota: ele[item + '_quota']
                 };
                  _.$set(Obj, 'quota', ele[item + '_quota']);
                 objChildren.push(Obj);
            });
            return objChildren;
        }
         data.forEach((ele, i) => {
             let obj = {
                 cluster_id: ele.cluster_id,
                 cluster_name: ele.cluster_name,
                 deploy_type: ele.deploy_type,
                 enable_resource_limit: ele.enable_resource_limit,
                 is_share_storage: ele.is_share_storage
                 // children: setChildren(ele)
             };
             _.$set(obj, 'children', setChildren(ele));
            result.push(obj);
            _.$forceUpdate();
         });
         return result;
        },
    }
}

template
image.png

求助各位大神为何v-model数据不实时更新

阅读 98
评论
    1 个回答

    自己回答下这个问题,主要原因是我的子级不是引用对象,而是一个简单的值,所以我在v-model中绑定scope.quota时,是不可以的,解决方案就是绑定指定数据到v-model即可

      撰写回答

      登录后参与交流、获取后续更新提醒