请问如何用 vue 实现这种点击改变背景色的需求？

Question

这大致就是一个可以分类存储的任务清单，红框为主分类，蓝框为主分类下的子分类，分类下有任务。

图中所有被框起来的地方都能被点击，需求就是：元素一被点击就改变背景色，点击了新的，旧的就恢复原来的颜色。

这个需求之前用原生 js 写过一遍，可是在 vue 中不太知道该怎么实现。我有想过记录 currentindex，动态绑定判断 class，但是似乎不太行，因为像“默认分类”和“默认子分类”这种根本不是同一级数据，是上下级的关系。

数据是存储在data里的，大概是下面这样，截图中所有要绑定点击事件的元素除了“所有任务”外都是用 v-for 遍历出来的：

            // 这里是主分类，subid对应子分类的id
            main: [
                {
                    id: 0,
                    name: "默认分类",
                    subid: [0]
                }, 
                {
                    id: 3,
                    name: "IFE",
                    subid: [1, 5, 6]
                }],

            // 这里主分类下的子分类，mainid对应主分类的id
            sub: [
                {
                    id: 0,
                    mainid: 0,
                    name: "默认子分类",
                    taskid: [0]
                }, 
                {
                    id: 1,
                    mainid: 3,
                    name: "task0001",
                    taskid: [3]
                }, 
                {
                    id: 5,
                    mainid: 3,
                    name: "task0002",
                    taskid: [4, 5]
                }, 
                {
                    id: 6,
                    mainid: 3,
                    name: "task0003",
                    taskid: [1, 2]
                }],

不知道有没有表达清楚，不知道有没有大佬看到我。是不是我 html 写错了呀，如果有大佬能够解答，万分感谢！！！！！

Answer 1

你的数据结构太别扭了，不是应该用树吗？类似这种：

[
  { id: 1, name: '1', active: false },
  {
    id: 2,
    name: '2',
    active: false,
    children: [
      { id: 2.1, name: '2.1', active: false },
      { id: 2.2, name: '2.2', active: true },
      { id: 2.3, name: '2.3', active: false }
    ]
  }
]

这样直观多了，然后节点加个 active 属性，在 <template> 绑定到节点的 class 就行，例如：

<li :class="item.active ? 'active'">{{item.name}}</li>

每次点击，就遍历树，除了当前节点的 active 设为 true，其他节点都设为 false 就行了。至于你说的记录 currentindex 这种思维，不是不行，但完全是停留在手动操作 dom 的老思路里出不来了。

Answer 2

  // 这里是主分类，subid对应子分类的id
            main: [
                {
                    id: 0,
                    name: "默认分类",
                    subid: [0],
                    
                    active: false,
                }, 
                {
                    id: 3,
                    name: "IFE",
                    subid: [1, 5, 6],
                    active: false,
                }],

            // 这里主分类下的子分类，mainid对应主分类的id
            sub: [
                {
                    id: 0,
                    mainid: 0,
                    name: "默认子分类",
                    taskid: [0],
                    active: false,
                }, 
                {
                    id: 1,
                    mainid: 3,
                    name: "task0001",
                    taskid: [3],
                    active: false,
                }, 
                {
                    id: 5,
                    mainid: 3,
                    name: "task0002",
                    taskid: [4, 5],
                    active: false,
                }, 
                {
                    id: 6,
                    mainid: 3,
                    name: "task0003",
                    taskid: [1, 2],
                    active: true,
                }],

数据结构中加入个active字段，再在v-for出来的html结构上结合click和v-class;注意每一个节点是否有父节点;