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

Posted 2023-03-14

【中文标题】如何在vue js中动态设置状态而不先声明它

【英文标题】：How to set state dynamically without declaring it first, in 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

【参考方案1】：

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

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