使用Vue JavaScript在li内部为ul添加样式

Question

我遇到了一个问题，如何使用Vue JavaScript在点击的li中为ul添加样式。我的html代码：

<ul>
<li>Menu</li>
<li @click="toggleSubMenu">Profile
<ul> //Add class here
<li>History</li>
</ul>
</li>
<li @click="toggleSubMenu">Media
<ul :class="{ 'd-block' : data.sub_menu_show}">
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
</ul>

我的vue代码：

<script>
import { reactive } from 'vue'
export default {
setup(){
const data = reactive({
sub_menu_show: '',
});
const toggleSubMenu = () => {
data.sub_menu_show = !data.sub_menu_show
}
return{
data,
toggleSubMenu
}
}
}
</script>

但是，我的期望是，当点击toggleSubMenu时，添加的ul样式只在点击的li内部，而不是添加到所有ul或其他子菜单中。

谢谢你。

Answer 1

当前，您正在为多个UI元素使用单一状态。这个怎么样：

<ul>
<li>Menu</li>
<li @click="() => toggleSubMenu('profile')">Profile
<ul :class="{ 'd-block': toggleStates['profile'] }">
<li>History</li>
</ul>
</li>
<li @click="() => toggleSubMenu('media')">Media
<ul :class="{ 'd-block': toggleStates['media'] }">
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
</ul>

<script>
import { ref } from 'vue'
export default {
setup(){
const toggleStates = ref({ profile: false, media: false });
const toggleSubMenu = (type) => {
toggleStates.value[type] = !toggleStates.value[type];
}
return {
toggleSubMenu,
toggleStates
}
}
}
</script>

Answer 2

@click是编写v-on指令的简写。默认情况下，此Vue指令将一个事件参数传递给指定的回调函数，该参数包含许多内容，包括目标元素。

因此，请将操作应用于该目标元素。

event.target.style.cssText = ''