<ul class="panel">
<li class="action_list action_expanded">
<MenuStatus/>
</li>
<li class="action_list"
:class="{"action_expanded": 1 == secActive}">
<div class="toggle"
@click.prevent.stop="toggleSecMenu(1, $event)">
<span class="action_name">Apparent Horizon</span>
</div>
<MenuApparentHorizon/>
</li>
<li class="action_list"
:class="{"action_expanded": 2 == secActive}">
<div class="toggle"
@click.prevent.stop="toggleSecMenu(2, $event)">
<span class="action_name">Material</span>
</div>
<MenuMaterial/>
</li>
<li class="action_list"
:class="{"action_expanded": 3 == secActive}">
<div class="toggle"
@click.prevent.stop="toggleSecMenu(3, $event)">
<span class="action_name">Camera</span>
</div>
<MenuPerspective/>
</li>
</ul>as the above code, the repeatability is very high, how to optimize it?
initial
<template v-for="(item, index) in items">
<li class="action_list"
:class="{"action_expanded": index == secActive || !item.text}"
v-if="item.template">
<div v-if="item.text" class="toggle"
@click.prevent.stop="toggleSecMenu(index, $event)">
<span class="action_name">{{ item.text }}</span>
</div>
<component @closeMenu="closeMenu" :is="item.template"></component>
</li>
<li class="action_list" v-else @click.prevent.stop="item.action">{{ item.text }}</li>
</template>
items: [
{
template: MenuStatus
},
{
text: "Apparent Horizon",
template: MenuApparentHorizon
},
{
text: "Material",
template: MenuMaterial
},
{
text: "Camera",
template: MenuPerspective
}
]feels too complicated and is not conducive to subsequent modifications