Question

我想要做的是将类别列表呈现为带有一些嵌套子菜单的菜单。我正在使用laravel blade + vuejs。

showSubMenu是一个可以为true或false的状态。

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

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

showSubMenu1 = false， showSubMenu2 = false， ...

但是我不想这样做，因为没有确切的类别数，并且每当删除一条记录时类别表的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部分中指定每个状态。但是vue抱怨这一点，并要求在vm的data部分中静态定义每个可能的状态名称。

Answer 1

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

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

如何在Vue JS中动态设置状态而不先声明它

1 个答案: