Category: Vue

Sometimes, we want to redirect to another page with Vue.js.

In this article, we’ll look at how to redirect to another page with Vue.js.

How to redirect to another page with Vue.js?

To redirect to another page with Vue.js, we can use the this.$router.push method.

For instance, we write

this.$router.push('home') 

to call push with the 'home' route path to go to /home route.

Conclusion

To redirect to another page with Vue.js, we can use the this.$router.push method.

Sometimes, we want to disable input conditionally with Vue.js.

In this article, we’ll look at how to disable input conditionally with Vue.js.

How to disable input conditionally with Vue.js?

To disable input conditionally with Vue.js, we can set the disabled prop to a boolean expression.

For instance, we write

<template>
  <div id="app">
    <button @click="disabled = !disabled">Toggle Enable</button>
    <input type="text" :disabled="disabled" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      disabled: true,
    };
  },
};
</script>

to add a button to toggle the disabled reactive property between true and false.

Then we set that as the value of the input’s disabled prop to disable the input only when disabled is true.

Conclusion

To disable input conditionally with Vue.js, we can set the disabled prop to a boolean expression.

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.