如何在vue js中动态设置状态而不先声明它答案

【问题标题】：How to set state dynamically without declaring it first, in vue js如何在vue js中动态设置状态而不先声明它
【发布时间】：2021-02-08 04:17:56
【问题描述】：

我正在尝试将类别列表呈现为菜单，并带有一些嵌套的子菜单。我正在使用 laravel Blade + vuejs。

showSubMenu 是一个可以为真或假的状态。

例如，通过点击 showSubMenu1，我想将其状态更改为 true 以显示其子菜单 div

问题是我应该首先在vue中声明每个状态，例如：

showSubMenu1 = 假， showSubMenu2 = 假， ...

但我不想这样做，因为没有确切的类别数量，而且类别表的 id 可以在删除记录时更改，因为它是一个增量整数

我尝试通过以下方式解决问题：

@foreach(\App\Models\Category::all() as $category)
                        <li @click="showSubMenu{{$category->id}} = !showSubMenu{{$category->id}}"  ><p>{{$category->name}}</p>
                            <div class="sub-menu"  v-if="showSubMenu{{$category->id}}">
                               
                            </div>
                        </li>
                    @endforeach

该方法在 react js 中有效，因为不需要在类的 state 部分中指定每个 state。但是 vue 对此抱怨并要求在 vm 的数据部分中静态定义每个可能的状态名称。

【问题讨论】：

您可以为每个子菜单状态使用一个对象，关键是类别->id

标签： laravel vue.js laravel-blade

【解决方案1】：

状态变量不必是像布尔值这样的简单数据类型，也可以是对象。因此，您可以将所有菜单状态保存在一个变量中：

data: () => ({
  activeMenus = {}
}),
methods: {
  isSubMenuVisible(id) {
   return id in this.activeMenus && this.activeMenus === true;
  },
  showSubMenu(id) {
    this.activeMenus[id] = true
  }
}

【讨论】：