我用vue写的Tree ，用数据动态增加子节点，页面渲染为什么不响应？感觉隐藏着一个所有人都会中招的vue大坑。

Question

点击加号，页面没响应，没变化。为什么了？

vue调试工具里显示，我的children 属性里已经插入值了，但页面不渲染。

代码里有数据，大家，可以本地跑一下。

调用页面

<template>
    <div>
        <div class="grid-content ">学生类型
            <ul id="stuTree" class="yunTreeBox">
                  <yunTree  :menuArray = "stuResource"></yunTree>
          </ul>
        </div>
    </div>
</template>

<script>
    import yunTree from './yunTree.vue'
    export default {
        data() {
            return {
                stuResource:[]
            };
        },
        mounted: function () {
            var self = this;
            setTimeout(function(){
       
                var stuArray= [{"resourceDesc":"学生    端","resourceId":101,"resourceParentId":-1,"resourceName":"学生类型","resourceUrl":""},{"resourceId":1,"resourceName":"课堂板书","resourceUrl":"/main/blackboardWriting","resourceDesc":"产品后台管理系统-学生端-课堂板书","resourceParentId":101,"resourceSort":1,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":2,"resourceName":"课中检测","resourceUrl":"/main/kezhongce","resourceDesc":"产品后台管理系统-学生端-课中检测","resourceParentId":101,"resourceSort":2,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":3,"resourceName":"课后作业","resourceUrl":"/main/demoShow","resourceDesc":"产品后台管理系统-学生端-课后作业","resourceParentId":101,"resourceSort":3,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":4,"resourceName":"单元检测","resourceUrl":"/main/tutoring","resourceDesc":"产品后台管理系统-学生端-单元检测","resourceParentId":101,"resourceSort":4,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":5,"resourceName":"阶段检测","resourceUrl":"/main/subjectTest","resourceDesc":"产品后台管理系统-学生端-阶段检测","resourceParentId":101,"resourceSort":5,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":6,"resourceName":"错题记录","resourceUrl":"/main/errorRecord","resourceDesc":"产品后台管理系统-学生端-错题记录","resourceParentId":101,"resourceSort":6,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":7,"resourceName":"个人中心","resourceUrl":"","resourceDesc":"产品后台管理系统-学生端-个人中心","resourceParentId":101,"resourceSort":7,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":8,"resourceName":"我的收藏","resourceUrl":"/main/favourite","resourceDesc":"产品后台管理系统-学生端-个人中心-我的收藏","resourceParentId":7,"resourceSort":8,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":9,"resourceName":"学校信息","resourceUrl":"/main/schoolInfo","resourceDesc":"产品后台管理系统-学生端-个人中心-学校信息","resourceParentId":7,"resourceSort":9,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":10,"resourceName":"个人设置","resourceUrl":"/main/peopleSet","resourceDesc":"产品后台管理系统-学生端-个人中心-个人设置","resourceParentId":7,"resourceSort":10,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null}]

              self.stuResource = stuArray;
              
            },3000)
        },
        computed: {
        },
        methods:{
        },
        components: {
            yunTree
        }
    };

</script>

<style>
</style>

树的父组件
yunTree.vue

<template>
    <ul>
      <treeRecusive v-if="rootData" :itemData="rootData">
      </treeRecusive>
    </ul>
</template>
<script>
    import treeRecusive from './treeRecursive.vue'
    export default {
        name:'yunTree',
        data() {
            return {
                rootData:null
            };
        },
        props: {
            menuArray: Array
        },
        watch:{
            menuArray(arry){
                this.assembleData(arry)
            }
        },
        computed: {
        },
        methods:{
            assembleData(menuArray){
                menuArray.forEach(function(item1,index){
                    item1.createTime = new Date().getTime();
                    menuArray.forEach(function(item2,index){
                        if(item1.resourceId==item2.resourceParentId){
                          if(item1.children){
                            item1.children.push(item2)
                          }else{
                            item1.children =[item2]
                          }
                        }
                    })
                })
                this.rootData = menuArray[0]||null;
            }
        },
        created(){
            this.assembleData(this.menuArray)
        },
        components: {
            treeRecusive
        }
    };

</script>

树的子组件递归调用
treeRecursive.vue

<template>
  <li>
    <div :class="{bold: isFolder}" @click="toggle" @dblclick="changeType">
      <span v-if="isFolder">[{{ open ? '-' : '+' }}]</span>
      {{ itemData.resourceName }}
    </div>
    <ul v-show="open" v-if="isFolder">
      <treeRecusive class="item" v-for="(itemData, index) in itemData.children" :key="itemData.createTime" :itemData="itemData">
      </treeRecusive>
      <li class="add" @click="addChild">+</li>
    </ul>
  </li>
</template>
<script>

export default {
  name:'treeRecusive',
  props: {
    itemData: Object
  },
  data() {
    return {
      open: false
    };
  },
  computed: {
    isFolder: function() {
      return this.itemData.children &&
        this.itemData.children.length
    }
  },
  methods: {
    toggle: function() {
      if (this.isFolder) {
        this.open = !this.open
      }
    },
    changeType: function() {
      if (!this.isFolder) {
        Vue.set(this.itemData, 'children', [])
        this.addChild()
        this.open = true
      }
    },
    addChild: function() {
      this.itemData.children.push({
            resourceDesc:"",
            resourceId:'',
            resourceParentId:this.itemData.resourceId,
            resourceName:"新项",
            resourceUrl:"",
            createTime:new Date().getTime()
          })
    }
  },
  components: {}
};

</script>

Answer 1

props是禁止动态传值的

Answer 2

1.props值赋给子组件自身属性
2.watch props变化
3.改变自身data属性
这样子组件dom就会变化
子组件代码改了下：

<script>
export default {
  name: 'treeRecusive',
  props: {
    itemData: Object
  },
  data() {
    return {
      open: false,
      node: this.itemData
    }
  },
  computed: {
    isFolder: function() {
      return this.node.children && this.node.children.length
    }
  },
  methods: {
    toggle: function() {
      if (this.isFolder) {
        this.open = !this.open
      }
    },
    changeType: function() {
      if (!this.isFolder) {
        Vue.set(this.node, 'children', [])
        this.addChild()
        this.open = true
      }
    },
    addChild: function() {
      console.log('come here')
      this.node.children.push({
        resourceDesc: '',
        resourceId: '',
        resourceParentId: this.node.resourceId,
        resourceName: '新项',
        resourceUrl: '',
        createTime: new Date().getTime()
      })
    }
  },
  components: {},
  watch: {
    itemData: {
      handler: function(val, oldVal) {
        console.log('come here watch', val)
        this.node = val
      },
      deep: true
    }
  }
}
</script>

Answer 3

这是你的代码的问题，还是提问时写错的？

Answer 4

ul里套ul，这样真的好吗~~

Answer 5

一直被这个问题困扰很久了

Answer 6

以前遇到过这问题，你懒加载引入组件试试