vue组件中怎么给对象添加属性

Question

在写一个tree组件的过程中,在新建节点的时候遇到一个问题;

描述:
当props取来的对象中有children属性,那么这个就是文件夹,可以展开子节点
希望实现,部分末端子节点没有children属性,但是可以添加子节点,使之成为文件夹
通过查看文档,使用了$set的方法为原对象添加属性,结果提示错误

代码如下:
html:

<ul class="rs_tree">
            <li v-for="node in treeData">
                <div @click="childrenShow(node,$event)" class="rs_tree_text">
                    <span class="rs_tree_dot" v-if="!isFolder(node)"></span>
                    <em class="fa fa-folder" v-if="isFolder(node)&&!node.isShow"></em>
                    <em class="fa fa-folder-open" v-if="isFolder(node)&&node.isShow"></em>
                    <span class="rs_tree_label">{{node.text}}</span>
                    <input type="text" class="rs_edit_input" v-model="node.text" @click="stop($event)" @keyup.enter="editEnd()">
                    <div class="rs_tree_icon" v-if="node.add" @click="addItem(node,$event)" title="新增"><i class="fa fa-plus"></i></div>
                    <div class="rs_tree_icon" v-if="node.edit" @click="editItem(node,$event)" title="编辑"><i class="fa fa-edit"></i></div>
                    <div class="rs_tree_icon" v-if="node.del" @click="delItem(node,$event)" title="删除"><i class="fa fa-trash"></i></div>
                </div>
                <items v-if="isFolder(node)" v-show="node.isShow" :tree-data="node.children" transition="node-down"></items>
            </li>
        </ul>

js:

        addItem(node,e){
                e.stopPropagation();
                node.isShow = true;
                if(node.children)
                {
                    console.log(node);
                    node.children.unshift({
                        text : '新建文件',
                        add : true,
                        edit : true,
                        del : true,
                    });
                }
                else
                {
                    console.log(node);
                    node.$set('children',[{
                        text : '新建文件',
                        add : true,
                        edit : true,
                        del : true,
                    }]);
                    console.log(this.treeData);
                }
                this.editEnd();
            },

数据

treeDate:[
             {
                        text : '中国',
                        add : true,
                        edit : true,
                        del : false,
                        isShow : false,
                        children : [{
                            text : '辽宁',
                            add : true,
                            edit : true,
                            del : true,
                            isShow : true,
                            children : [{
                                text : '沈阳',
                                add : true,
                                edit : true,
                                del : true,
                            },
                            {
                                text : '大连',
                                add : false,
                                edit : true,
                                del : true,
                            },
                            {
                                text : '鞍山',
                                add : false,
                                edit : true,
                                del : true,
                            },
                            {
                                text : '抚顺',
                                add : false,
                                edit : true,
                                del : true,
                            }]
                        },

当我点击"中国","辽宁"等edit,因为有children所以能为children添加数组,
但是我点击"沈阳"或者新建的子节点时,我想添加children属性却不行

错误提示如下

请问应该怎么添加children属性,谢谢
PS:这个tree进行了组件递归,嵌套其他组件时出现很多问题,如:dialog组件弹出重复,位置不对等问题.请问有什么好的解决办法

谢谢!

Answer 1

https://cn.vuejs.org/v2/examp...
研究下官方的这例子

仔细查看，这里就有添加子节点的逻辑

Answer 2

set不是这么用的，
应该是

Vue.set(node, 'children', [{text : '新建文件', add : true, edit : true, del : true}])

或者是

this.$set(node, 'children', [{text : '新建文件', add : true, edit : true, del : true}])