javascript - vue2写了一个递归组件，data返回值不具有自己内部的状态。

Question

递归组件实现树形，点击一个节点展开收起它的子节点。现在点击一个，同级的所有子节点都一起展开收起。是什么原因呢？

<template>
    <li v-for="(node, key) in model">
        <label @click="isOpen = !isOpen">{{ node.title }}</label>
        <p class="children" v-if="isFolder" v-show="isOpen">
            <treeview :labelname="labelname"
                      :model="node.nodes">
            </treeview>
        </p>
    </li>
</template>

<script>
    export default {
        name: 'treeview',
        data() {
            return {
                isOpen: false
            }
        },
        props:
        {
           model: 
           {
               Type: Array,
               default: function() {
                    return [];
               }
            }
         }
     } 
</script>

Answer 1

tree组件中的目录是通过v-for循环出来的，也就是说某一层tree组件中会包含一个或数个目录，这些目录内部可能是新的tree组件，而这些目录本身并不是tree组件而是列表渲染出来的，使用一个isOpen去控制多个目录的折叠，这明显就不可能嘛。

我的解决办法是为初始化数据的时候递归为每个目录设置一个isOpen属性，然后在点击事件中传入index，然后再是

// 为目录增加显示和隐藏的标志开关
function addSwitch(arr) {
    arr.forEach((val)=>{
        let children = val.children;
        if (children) {
            val.isOpen = false;
            addSwitch(children);
        }
    });
    return arr;
}

// 然后在递归组件的折叠逻辑中更改当前点击目录的标识符
toggle(index){
    this.bookmarks[index].isOpen = !this.bookmarks[index].isOpen;
}

这个问题是我在写一个谷歌浏览器的书签扩展程序时发现的，当时也犯了跟楼主一样的错误...