我用vue寫的Tree ，用數(shù)據(jù)動(dòng)態(tài)增加子節(jié)點(diǎn)，頁面渲染為什么不響應(yīng)？感覺隱藏著一個(gè)所有人都會(huì)中招的vue大坑。

點(diǎn)擊加號(hào)，頁面沒響應(yīng)，沒變化。為什么了？

vue調(diào)試工具里顯示，我的children 屬性里已經(jīng)插入值了，但頁面不渲染。

代碼里有數(shù)據(jù)，大家，可以本地跑一下。

調(diào)用頁面

<template>
    <div>
        <div class="grid-content ">學(xué)生類型
            <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":"學(xué)生    端","resourceId":101,"resourceParentId":-1,"resourceName":"學(xué)生類型","resourceUrl":""},{"resourceId":1,"resourceName":"課堂板書","resourceUrl":"/main/blackboardWriting","resourceDesc":"產(chǎn)品后臺(tái)管理系統(tǒng)-學(xué)生端-課堂板書","resourceParentId":101,"resourceSort":1,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":2,"resourceName":"課中檢測(cè)","resourceUrl":"/main/kezhongce","resourceDesc":"產(chǎn)品后臺(tái)管理系統(tǒng)-學(xué)生端-課中檢測(cè)","resourceParentId":101,"resourceSort":2,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":3,"resourceName":"課后作業(yè)","resourceUrl":"/main/demoShow","resourceDesc":"產(chǎn)品后臺(tái)管理系統(tǒng)-學(xué)生端-課后作業(yè)","resourceParentId":101,"resourceSort":3,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":4,"resourceName":"單元檢測(cè)","resourceUrl":"/main/tutoring","resourceDesc":"產(chǎn)品后臺(tái)管理系統(tǒng)-學(xué)生端-單元檢測(cè)","resourceParentId":101,"resourceSort":4,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":5,"resourceName":"階段檢測(cè)","resourceUrl":"/main/subjectTest","resourceDesc":"產(chǎn)品后臺(tái)管理系統(tǒng)-學(xué)生端-階段檢測(cè)","resourceParentId":101,"resourceSort":5,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":6,"resourceName":"錯(cuò)題記錄","resourceUrl":"/main/errorRecord","resourceDesc":"產(chǎn)品后臺(tái)管理系統(tǒng)-學(xué)生端-錯(cuò)題記錄","resourceParentId":101,"resourceSort":6,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":7,"resourceName":"個(gè)人中心","resourceUrl":"","resourceDesc":"產(chǎn)品后臺(tái)管理系統(tǒng)-學(xué)生端-個(gè)人中心","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":"產(chǎn)品后臺(tái)管理系統(tǒng)-學(xué)生端-個(gè)人中心-我的收藏","resourceParentId":7,"resourceSort":8,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":9,"resourceName":"學(xué)校信息","resourceUrl":"/main/schoolInfo","resourceDesc":"產(chǎn)品后臺(tái)管理系統(tǒng)-學(xué)生端-個(gè)人中心-學(xué)校信息","resourceParentId":7,"resourceSort":9,"resourceType":1,"resourceProductId":1,"createDate":1526623438000,"updateDate":1526623440000,"selected":0,"resourceIcon":null,"resourceBeen":null},{"resourceId":10,"resourceName":"個(gè)人設(shè)置","resourceUrl":"/main/peopleSet","resourceDesc":"產(chǎn)品后臺(tái)管理系統(tǒng)-學(xué)生端-個(gè)人中心-個(gè)人設(shè)置","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>

樹的子組件遞歸調(diào)用
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:"新項(xiàng)",
            resourceUrl:"",
            createTime:new Date().getTime()
          })
    }
  },
  components: {}
};

</script>