How to use "this" in Vue 3

Question

I'm working on a component in Vue3/TypeScript. I'm relatively new to Vue.

I'm dynamically creating a div. I want to be able to delete it when a user clicks on the "x" button. This is the "closeStatus" method.

In JavaScript I can pass this, but Vue hates it.

If anyone can help.

Thanks.

Here is the code:

<template>
    <div>
        <button @click="addStatus()" >Add Status</button>

        <div id="slide" class="slide-modal">
            <div class="clear-notifications" @click='clearAllNotifications()'>Clear all notifications</div>

            <div class="status-div">
                <div>11:00 Booking requested</div>
                <div @click="closeStatus(this)"><img src="../assets/cross.svg" /></div>
            </div>

            <div class="status-div">
                <div>11:30 Booking requested</div>
                <div @click="closeStatus(this)"><img src="../assets/cross.svg" /></div>
            </div>

        </div>
    </div>
</template>

<script lang="ts">
    export default {
        name: 'SlideModal',
        methods: {
            clearAllNotifications() {
                const allNotifications = document.querySelectorAll(".status-div");
                for(let x=0;x<allNotifications.length;x++) {
                    allNotifications[x].remove(); //removes all the child elements.
                }
                document.getElementById('slide').style.visibility='hidden'; //This should be Vue reactive.
            },

            addStatus() {
                document.getElementById('slide').style.visibility='visible'; //This should be Vue reactive.
                const statusMessage = "Another Message"
                var div = document.createElement('div');
                div.setAttribute('class', 'status-div');
                div.innerHTML = '<div>' + statusMessage + '</div><div onclick="closeStatus(this)"><img src="/src/assets/cross.svg" /></div>'
                document.getElementById('slide').appendChild(div);
            },

            closeStatus(elm: any) {
                elm.parentNode.remove();
                const allNotifications = document.querySelectorAll(".status-div");
                if(allNotifications.length == 0 ) {
                    document.getElementById('slide').style.visibility='hidden'; //This should be Vue reactive.
                }
            }
        }
    }
</script>

Answer 1

Code is javascript DOM management stuff and far from Vue style. Vue manages DOM with variables and that is what makes javascript frameworks awesome. Let me first share the modified code.

<template>
  <div>
    <button @click="addStatus()" >Add Status</button>

    <div id="slide" class="slide-modal" v-show="visibleSlide">
      <div class="clear-notifications" @click='clearAllNotifications()'>Clear all notifications</div>
      <div class="status-div">
        <div>11:00 Booking requested</div>
        <div @click="closeStatus(this)"><img src="../assets/cross.svg" /></div>
      </div>

      <div class="status-div">
        <div>11:30 Booking requested</div>
        <div @click="closeStatus(this)"><img src="../assets/cross.svg" /></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'SlideModal',
    data() {
      return {
        visibleSlide: true
      }
    },
    methods: {
      clearAllNotifications() {
        const allNotifications = document.querySelectorAll(".status-div");
        for(let x = 0; x < allNotifications.length; x++) {
          allNotifications[x].remove(); //removes all the child elements.
        }

        this.visibleSlide = false
      },

      addStatus() {
        this.visibleSlide = true;

        const statusMessage = "Another Message";
        var div = document.createElement('div');
        div.setAttribute('class', 'status-div');
        div.innerHTML = '<div>' + statusMessage + '</div><div onclick="closeStatus(this)"><img src="/src/assets/cross.svg" /></div>'
        document.getElementById('slide').appendChild(div);
      },

      closeStatus(elm: any) {
        elm.parentNode.remove();
        const allNotifications = document.querySelectorAll(".status-div");
        if(allNotifications.length == 0 ) {
          this.visibleSlide = false
        }
      }
    }
  }
</script>

I have just updated what is commented: "//This should be Vue reactive."

But it is still not benefiting from Vue framework. Here is my whole idea of Vue code

<template>
  <div>
    <button @click="addStatus()" >Add Status</button>
    <div id="slide" class="slide-modal" v-if="statuses.length">
      <div class="clear-notifications" @click='clearAllNotifications()'>Clear all notifications</div>
      <div v-for="status in statuses" :key="status.id" class="status-div">
        <div>{{ status.text }}</div>
        <div @click="closeStatus(status)"><img src="../assets/cross.svg" /></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'SlideModal',
    data() {
      return {
        statuses: [
          {
             id: 1,
             text: '11:00 Booking requested'
           }, {
              id: 2,
              text: '11:30 Booking requested'
           }
        ]
      }
    },
    methods: {
      clearAllNotifications() {
        this.statuses = []
      },

      addStatus() {
        const statusMessage = "Another Message";
            
        this.statuses.push({
          id: this.statuses.length + 1,
          text: statusMessage
        })
      },

      closeStatus(elm: any) {
        const index = this.statuses.map((status) => status.id).indexOf(elm.id);
        this.statuses.splice(index, 1);
      }
    }
  }
</script>

As you can see, DOM elements are managed by variables and their operations instead of DOM management methods.

Hope this is helpful