Category: Vue Answers

Sometimes, we want to handle Bootstrap modal hide event in Vue.js.

In this article, we’ll look at how to handle Bootstrap modal hide event in Vue.js.

How to handle Bootstrap modal hide event in Vue.js?

To handle Bootstrap modal hide event in Vue.js, we can assign a ref to our modal element.

Then we can pass the ref into the jQuery $ function and call on on it.

For instance, we write

<script>
//...
export default {
  //...
  methods: {
    doSomethingOnHidden() {
      //...
    },
  },
  mounted() {
    $(this.$refs.vuemodal).on("hidden.bs.modal", this.doSomethingOnHidden);
  },
  //...
};
</script>

to get the modal element with this.$refs.vuemodal.

Then we pass that into $ to return a jQuery object for the element.

And then we call on with the 'hidden.bs.modal' event and set the event handler of that to the this.doSomethingOnHidden method.

Conclusion

To handle Bootstrap modal hide event in Vue.js, we can assign a ref to our modal element.

Then we can pass the ref into the jQuery $ function and call on on it.

Sometimes, we want to change the default font in Vuetify.

In this article, we’ll look at how to change the default font in Vuetify.

How to change the default font in Vuetify?

To change the default font in Vuetify, we can set the font-family CSS property in the global styles.

For instance, in main.scss we write

$font-family: "Ubuntu" 

.v-application {
  [class*="text-"] {
    color: #36405a;
    font-family: $font-family, sans-serif !important;
  }
  font-family: $font-family, sans-serif !important;
}

to set the font-family value to $font-family, which is set to 'Ubuntu'.

Now our Vuetify app will use Ubuntu as the default font.

Conclusion

To change the default font in Vuetify, we can set the font-family CSS property in the global styles.

Sometimes, we want to use document.getElementById in Vue.js.

In this article, we’ll look at how to use document.getElementById in Vue.js

How to use document.getElementById in Vue.js?

To use document.getElementById in Vue.js, we can assign a ref to the element we want to get.

And then we can use this.$refs to get the element.

For instance, we write

<template>
  <div>
    <div ref="myDiv">...</div>
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    showMyDiv() {
      console.log(this.$refs.myDiv);
    },
  },
  //...
};
</script>

to assign the myDiv ref to the div.

And then we can get the div in the showMyDiv method by using this.$refs.myDiv.

Conclusion

To use document.getElementById in Vue.js, we can assign a ref to the element we want to get.

Sometimes, we want to run code only after the component is fully loaded and initialized in Vue.js.

In this article, we’ll look at how to run code only after the component is fully loaded and initialized in Vue.js.

How to run code only after the component is fully loaded and initialized in Vue.js?

To run code only after the component is fully loaded and initialized in Vue.js, we can put the code in the mounted hook.

For instance, we write

<script>
//...
export default {
  //...
  mounted() {
    window.addEventListener("load", () => {
      // ...
    });
  },
  //...
};
</script>

to call window.addEventListener in the mounted hook to listen to the load event.

And then in the callback, we can run anything we want when the component is rendered.

Conclusion

To run code only after the component is fully loaded and initialized in Vue.js, we can put the code in the mounted hook.

Sometimes, we want to run code in mounted and again for restart functionality in Vue.js.

In this article, we’ll look at how to run code in mounted and again for restart functionality in Vue.js.

How to run code in mounted and again for restart functionality in Vue.js?

To run code in mounted and again for restart functionality in Vue.js, we can move our code in the mounted hook into its own method.

For instance, we write

<template>
  <div>
    <button v-if="playerWon" @click="init">Play Again</button>
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    init() {
      //...
    },
  },
  mounted() {
    this.init();
  },
  //...
};
</script>

to create the init method that we call in the mounted hook and if we click on the Play Again button.

Conclusion

To run code in mounted and again for restart functionality in Vue.js, we can move our code in the mounted hook into its own method.