vue的name属性递归问题

Question

点击1展开，但是现在问题是2下面的列表也展开了

Answer 1

试试这样行不行:
给msg的元素加上一个字段 bool

{
text:1,
bool:false,
next:[]
}

然后

@click.self.stop="a.bool=!a.boll"
<gs v-if="a.bool>

Answer 2

应该是类似下面的形式，需要给每个有子列表的li添加唯一bool标示控制其子列表是否显示的标志。

{
          text:1,
          bool:false,
          next:[{
            text:'1-1-1',
             bool:false,
            next:[{
              text:'1-1-1-1'
            }]
          }]
      }
 //child相应修改如下所示
<template>
  <ul>
      <li v-for="a in msg" @click.self.stop="a.bool = !a.bool">
          {{a.text}}
          <gs :msg="a.next" v-if="a.bool"></gs>
      </li>
  </ul>
</template>