how to show div after click only for few seconds

I’m working with BootstrapVue.

I have – I think – a very simple question, but I could not find anything that worked for me. I have a <b-button> which I want to click and than the second <div> should be shown but only for 3 Seconds.

I want to have my code without jQuery – how can I achieve that?

Thank You!

<div class="row mb-3">
  <div class="col-8 col-md-6 mt-4 ml-1">
    <b-button @click="clickIt()"</b-button>
  </div>
  <div class="col-2 col-md-5 mt-4">
    <p>You've clicked it!</p>
  </div>
</div>

Answer

I hope this should resolve your problem.

<div class="row mb-3">
  <div class="col-8 col-md-6 mt-4 ml-1">
    <b-button @click="clickIt()"</b-button>
  </div>
  <div v-if="isClicked" class="col-2 col-md-5 mt-4">
    <p>You've clicked it!</p>
  </div>
</div>

export default {
  data: () => {
    return { isClicked: false };
  },
  methods: {
    clickIt() {
      this.isClicked = true
      setTimeout(() => {
        this.isClicked = false;
      }, 3000);
    },
  },
};