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

Question

递归组件实现树形，点击一个节点展开收起它的子节点。现在点击一个，同级的所有子节点都一起展开收起。是什么原因呢？<template>    <li v-for="(node, key) in model">        <label @click="isOpen = !isOpen">{{ node.title }}</label>        <div class="children" v-if="isFolder" v-show="isOpen">            <treeview :labelname="labelname"                      :model="node.nodes">            </treeview>        </div>    </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;
}

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