8

I am trying out the composition api in vueJs 3. Unfortunately I don't know how to include my mounted code in the setup(). When I put the code into the setup, the javascript tries to access the not yet rendered DOM. Can anyone tell me how I have to rewrite this?

Option api sytle (works)

<script>
export default {
    name: "NavBar",
    data() {
        return {};
    },
    methods: {},
    mounted() {
        const bm = document.querySelector('#toggle');
        const menu = document.querySelectorAll('nav ul li');
        const overlay = document.querySelector('#overlay');

        // ...
        bm.addEventListener('click', () => {  
            bm.classList.toggle("active");
            overlay.classList.toggle("open");
        })
 
    },
}
</script>
<template>
    <header>
        <div class="button_container" id="toggle">
          <span class="top"></span>
          <span class="middle"></span>
          <span class="bottom"></span>
        </div>
        <div class="overlay" id="overlay">
          <nav class="overlay-menu">
            <ul>
            <li><a href="#home">Home</a></li>
            <!-- ... -->
            </ul>
          </nav>
        </div>      
    </header>    
</template>

2 Answers 2

7
  1. First of all, this not a good practice to get a html element via document.querySelector(), see how to bind events in vue3
// bad

<div class="button_container" id="toggle">...</div>

mounted() {
    const bm = document.querySelector('#toggle');
    bm.addEventListener('click', () => {  
        bm.classList.toggle("active");
        overlay.classList.toggle("open");
    })
}

// good
<div class="button_container" id="toggle" @click="toggleContainer">...</div>

methods: {
    toggleContainer() {
        ...
    }
}
  1. If you really want to document.querySelector() in setup(), you can use onMounted
import { onMounted } from 'vue';

export default {
    setup() {
        onMounted(() => {
             const bm = document.querySelector('#toggle');
             bm.addEventListener('click', () => {  
                 bm.classList.toggle("active");
                 overlay.classList.toggle("open");
             })
        });
    }
}

// or inside <script setup>

import { onMounted } from 'vue';

onMounted(() => {
   ....
});

But, just as @kissu commented, ref is a better way if you have to handle the html tag directly in vue

<div
   ref="toggler">
   ...
</div>

<script setup>
import { ref, onMounted } from 'vue';

const toggler = ref(null);

onMounted(() => {
    console.log(toggler.value) // <div></div>
});
</script>

  1. But none of the above follow the concept of Vue, which is Vue is driven by data.

Since you seem to create a click event listener which will effect the class in html, here is the Vue way:

<template>
    <header>
        <div
          class="button_container"
          id="toggle"
          :class="{
             'active': isActiveBm
          }"
          @click="toggle">
          <span class="top"></span>
          <span class="middle"></span>
          <span class="bottom"></span>
        </div>
        <div
          class="overlay"
          id="overlay"
          :class="{
             'open': isOpenOverlay
          }">
          <nav class="overlay-menu">
            <ul>
            <li><a href="#home">Home</a></li>
            <!-- ... -->
            </ul>
          </nav>
        </div>      
    </header>    
</template>

<script setup>
import { ref } from 'vue';

const isActiveBm = ref(false);
const isOpenOverlay = ref(false);

const toggle = () => {
    isActiveBm.value = !isActiveBm.value;
    isOpenOverlay.value = !isOpenOverlay.value;
}
</script>
3
  • 1
    template refs are a more precise alternative to querySelectors.
    – kissu
    Oct 30, 2022 at 15:21
  • 1
    Thanks DengSihan! I will refector and will bind in right way! Oct 30, 2022 at 15:33
  • 1
    @kissu Thanks a lot for your kind suggestions, I've updated the answer, and hope it will help Max
    – DengSihan
    Oct 30, 2022 at 15:41
0

From the Vue docs Typing Component Template refs https://vuejs.org/guide/typescript/composition-api.html

const theModal = ref<InstanceType<typeof Element> | null>(null);


onMounted(() => {
        const modal = new Modal(theModal.value!, {});

        modal.show();
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.