Add style to ul inside li with Vue JavaScript

ASHafizullah 0
Viewed 55

I have a problem how to add style to ul inside clicked li with Vue JavaScript. My html code:

<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>

And my vue code:

<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>

But, and my expectation is when toggleSubMenu clicked, the ul style added is only inside li that clicked, not add to all ul or other sub menu.

Thanks before.

vue.js javascript css html
2 Answers

Currently, you are using a single state for multiple UI elements. How about this instead:

<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>
Viktor Luft0

@click is a shorthand for writing v-on directive. This Vue directive by default passes an event argument that contains a lot of things including the target element to the specified callback function.

Therefore, apply the operation to that target element.

event.target.style.cssText = ''
zaghadon0
Related