Category: JavaScript

Sometimes, we want to dispatch actions between two namespaced Vuex modules.

In this article, we’ll look at how to dispatch actions between two namespaced Vuex modules.

How to dispatch actions between two namespaced Vuex modules?

To dispatch actions between two namespaced Vuex modules, we can call dispatch with the module name prefixed to the action method and the root option set to true.

For instance, we write

dispatch(
  "notification/triggerNotifcation",
  {
    //...
  },
  { root: true }
);

to dispatch the notification/triggerNotifcation action which is in the notification module.

And we set root to true to let us dispatch actions from any module and namespace.

Conclusion

To dispatch actions between two namespaced Vuex modules, we can call dispatch with the module name prefixed to the action method and the root option set to true.

Sometimes, we want to use Moment.js with Vue.js.

In this article, we’ll look at how to use Moment.js with Vue.js.

How to use Moment.js with Vue.js?

To use Moment.js with Vue.js, we can call the moment function in our code.

For instance, we write

<template>
  <div>
    {{ moment().format("MMMM Do YYYY, h:mm:ss a") }}
  </div>
</template>

<script>
import moment from "moment";

export default {
  methods: {
    moment(...args) {
      return moment(...args);
    },
  },
};
</script>

to define the moment method that calls the moment function and returns its result.

We spread the args arguments array into the moment function we imported.

Then we can use the moment method in our template code with

{{ moment().format("MMMM Do YYYY, h:mm:ss a") }}

Conclusion

To use Moment.js with Vue.js, we can call the moment function in our code.

Sometimes, we want to call a Vue.js function on page load

In this article, we’ll look at how to call a Vue.js function on page load

How to call a Vue.js function on page load?

To call a Vue.js function on page load, we can run our code in the beforeMount hook.

For instance, we write

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

to call this.getUnits in the beforeMount hook so getUnits runs when the page loads.

Conclusion

To call a Vue.js function on page load, we can run our code in the beforeMount hook.

Sometimes, we want to create anchor tags with Vue Router.

In this article, we’ll look at how to create anchor tags with Vue Router.

How to create anchor tags with Vue Router?

To create anchor tags with Vue Router, we can add the scrollBehavior method when we create the VueRouter instance.

For instance, we write

new VueRouter({
  mode: "history",
  scrollBehavior: (to, from, savedPosition) => {
    if (to.hash) {
      return { selector: to.hash };
    } else {
      return { x: 0, y: 0 };
    }
  },
  routes: [
    { path: "/", component: AbcView },
    //...
  ],
});

to create the VueRouter instance with an object that has the scrollBehavior method.

In it, we check for the hash with to.hash.

If it’s set, then we return { selector: to.hash } to scroll to the element with the ID given by the hash.

Otherwise, we don’t scroll.

Conclusion

To create anchor tags with Vue Router, we can add the scrollBehavior method when we create the VueRouter instance.

Sometimes, we want to prevent on click on parent when clicking button inside div with Vue.js.

In this article, we’ll look at how to prevent on click on parent when clicking button inside div with Vue.js.

How to prevent on click on parent when clicking button inside div with Vue.js?

To prevent on click on parent when clicking button inside div with Vue.js, we can add the stop modifier to stop event propagation.

For instance, we write

<template>
  <div>
    <p @click.stop="onClick">hello world</p>
  </div>
</template>

to add @click.stop and set it to onClick.

With the stop modifier, onClick only runs when the p element is clicked.

Conclusion

To prevent on click on parent when clicking button inside div with Vue.js, we can add the stop modifier to stop event propagation.