Category: JavaScript

Sometimes, we want to override scoped styles in Vue.js components.

In this article, we’ll look at how to override scoped styles in Vue.js components.

How to override scoped styles in Vue.js components?

To override scoped styles in Vue.js components, we add more specificity to the selector for the element with the styles we want to override.

For instance, we write

<template>
  <div class="wrapper">
    <comp-b>...</comp-b>
  </div>
</template>

<script>
import CompB from "@/.../CompB";

export default {
  components: {
    CompB,
  },
};
</script>

<style>
.wrapper .compb-header {
  color: red;
}
</style>

to set the element with class compb-header inside the element with class wrapper‘s color to red.

Conclusion

To override scoped styles in Vue.js components, we add more specificity to the selector for the element with the styles we want to override.

Sometimes, we want to get Vue Router router parameters into Vuex actions.

In this article, we’ll look at how to get Vue Router router parameters into Vuex actions.

How to get Vue Router router parameters into Vuex actions?

To get Vue Router router parameters into Vuex actions, we can import the router directly and use router.currentRoute.params to access the route URL parameter values.

For instance, we write

router.js

import Vue from "vue";
import VueRouter from "vue-router";
import routes from "./routes";

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  routes,
});

export default router;

to create our router and export it.

Then we write

import router from "@/router";

//...
router.currentRoute.params.id;
//...

to import the router and then use router.currentRoute.params.id to get the value of the id route URL parameter.

Conclusion

To get Vue Router router parameters into Vuex actions, we can import the router directly and use router.currentRoute.params to access the route URL parameter values.

Sometimes, we want to access props in mounted function with Vue.js.

In this article, we’ll look at how to access props in mounted function with Vue.js.

How to access props in mounted function with Vue.js?

To access props in mounted function with Vue.js, we add v-if to our component to show the component only when the prop is set.

For instance, we write

<template>
  <div>
    <ChildComponent v-if="testData" :data="testData" />
  </div>
</template>

to render ChildComponent only if the testData reactive property is set.

We set the data prop to testData this means the data prop would be set to testData in the mounted hook since we render the component only when testData is set.

Conclusion

To access props in mounted function with Vue.js, we add v-if to our component to show the component only when the prop is set.

Sometimes, we want to close dialog when ESC key is pressed with Vuetify and Vue.js.

In this article, we’ll look at how to close dialog when ESC key is pressed with Vuetify and Vue.js.

How to close dialog when ESC key is pressed with Vuetify and Vue.js?

To close dialog when ESC key is pressed with Vuetify and Vue.js, we can add a keydown event listener to the dialog.

For instance, we write

<template>
  <div>
    <v-dialog v-model="dialog" @keydown.esc="dialog = false"></v-dialog>
  </div>
</template>

<script>
export default {
  //...
  data: () => ({
    dialog: false,
  }),
  //...
};
</script>

to listen for esc key presses with the @keydown.esc directive.

And if the event is triggered, we set dialog to false to close the dialog.

We set v-model to dialog so that the dialog is open only when dialog is true.

Conclusion

To close dialog when ESC key is pressed with Vuetify and Vue.js, we can add a keydown event listener to the dialog.

Sometimes, we want to create a simple 10 seconds countdown in Vue.js.

In this article, we’ll look at how to create a simple 10 seconds countdown in Vue.js.

How to create a simple 10 seconds countdown in Vue.js?

To create a simple 10 seconds countdown in Vue.js, we can use the setInterval.

For instance, we write

<template>
  <div>
    {{ countDown }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      countDown: 10,
    };
  },
  method: {
    countDownTimer() {
      const timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--;
        } else {
          clearInterval(timer);
        }
      }, 1000);
    },
  },
  mounted() {
    this.countDownTimer();
  },
};
</script>

to create the countDownTimer method.

In it, we call setInterval with a callback that checks if this.countDown is bigger than 0.

If it is, we decrement this.countDown by 1.

Otherwise, we call clearInterval to clear the timer.

The callback runs every 1000 milliseconds which is 1 second.

We call countDownTimer in the mounted hook to run the code when the component is mounted.

The countDown value is displayed in the template.

Conclusion

To create a simple 10 seconds countdown in Vue.js, we can use the setInterval.