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

Question

如下图后端数据

我们需要处理成如下图适配的结构

---

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

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

Answer 1

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