Here is my code

<div >
    <div id="div1">
        <div >Hi, How may I help you?</div>
        <div ></div>
    </div>
</div>

Here I am targeting the pop-up-chat div and setting 5 seconds delay and hiding the div. can anyone tell me what's wrong with it?

export default {
  name: 'PopUpMsg',
  mounted() {
      this.msgShow();
  },
  methods: {
      msgShow() {
          const msg = document.getElementsByClassName('pop-up-chat');

          setTimeout(() => {
              msg.style.visibility = 'hidden';
          }, 5000);
      },
  },
}

CodePudding user response：

Just add new property to data showPopup and set it to true then change it to false within mounted hooks

Using v-show to show or hide the wanted element v-if-vs-v-show

<template>
  <div>
    <!-- binding style -->
    <div :style="{visibility: showPopup ? 'visible' : 'hidden' }"

    <!-- or use v-show directive to show | hide element -->
    <div v-show="showPopup" >
      <div id="div1">
        <div >Hi, How may I help you?</div>
        <div ></div>
      </div>
    </div>
  <!-- The rest of your template -->
  </div>
</template>

<script>
export default {
  name: 'PopUpMsg',
  data() {
    return {
      showPopup: true,
    }
  }
  mounted() {
    this.msgShow();
  },
  methods: {
    msgShow() {
      setTimeout(() => {
        this.showPopup = false
      }, 5000)
    },
  },
}
</script>

Or you can create custom directive v-visible

<div v-visible="showPopup" />

Vue.directive('visible', function(el, binding) {
    el.style.visibility = Boolean(binding.value) ? 'visible' : 'hidden';
});

CodePudding user response：

It works this way

methods: {
    msgShow() {
        const msg = document.getElementById('msg');
        setTimeout(() => {
            msg.style.display = 'block';
            setTimeout(() => {
                msg.style.display = 'none';
            }, 10000);
        }, 5000);
    },
},

.pop-up-chat { display : none; //initially }