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，然后再是//&nbsp;为目录增加显示和隐藏的标志开关function&nbsp;addSwitch(arr)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;arr.forEach((val)=>{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;children&nbsp;=&nbsp;val.children;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(children)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;val.isOpen&nbsp;=&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addSwitch(children); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;arr; }//&nbsp;然后在递归组件的折叠逻辑中更改当前点击目录的标识符toggle(index){&nbsp;&nbsp;&nbsp;&nbsp;this.bookmarks[index].isOpen&nbsp;=&nbsp;!this.bookmarks[index].isOpen; }这个问题是我在写一个谷歌浏览器的书签扩展程序时发现的，当时也犯了跟楼主一样的错误...