Author: John Au-Yeung

Sometimes, we want to redirect to the default path with Vue Router.

In this article, we’ll look at how to redirect to the default path with Vue Router.

How to redirect to the default path with Vue Router?

To redirect to the default path with Vue Router, we can redirect / to the route we want.

For instance, we write

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

import Home from "../components/home/container";
import LiveAgent from "../components/live_agent/container";
//...

const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    component: Home,
    name: "home",
    path: "/home",
  },
  {
    component: LiveAgent,
    name: "liveAgent",
    path: "/live-agent",
  },
  //...
];

export default new VueRouter({
  routes,
});

to add redirect to redirect / to /home.

Then if we go to /, we see the /home route loaded.

Conclusion

To redirect to the default path with Vue Router, we can redirect / to the route we want.

Sometimes, we want to change the default width of a Vuetify data table cell.

In this article, we’ll look at how to change the default width of a Vuetify data table cell.

How to change the default width of a Vuetify data table cell?

To change the default width of a Vuetify data table cell, we can set the headers prop to an array with the column widths.

For instance, we write

<template>
  <div>
    <v-data-table :headers="headers" :items="desserts"> </v-data-table>
  </div>
</template>

<script>
export default {
  //...
  data() {
    return {
      headers: [
        { text: "Dessert (100g serving)", value: "name", width: "20%" },
        { text: "Calories", value: "calories", width: "50%" },
        { text: "Fat (g)", value: "fat" },
        { text: "Carbs (g)", value: "carbs", width: "200px" },
      ],
    };
  },
  //...
};
</script>

to add the v-data-table component with the headers prop to set the table headers data.

We set the headers prop to the headers array.

In the headers entries, we set the width property to set the width of each column.

Conclusion

To change the default width of a Vuetify data table cell, we can set the headers prop to an array with the column widths.

Sometimes, we want to trigger event after component has been rendered in Vue.js.

In this article, we’ll look at how to trigger event after component has been rendered in Vue.js.

How to trigger event after component has been rendered in Vue.js?

To trigger event after component has been rendered in Vue.js, we can call this.$emit in the mounted hook.

For instance, we write

<script>
export default {
  //...
  mounted() {
    this.$emit("loaded");
  },
  //...
};
</script>

to emit the loaded event in the mounted hook with this.$emit.

Conclusion

To trigger event after component has been rendered in Vue.js, we can call this.$emit in the mounted hook.

Sometimes, we want to add switch statement with Vue.js templates.

In this article, we’ll look at how to add switch statement with Vue.js templates.

How to add switch statement with Vue.js templates?

To add switch statement with Vue.js templates, we should put the switch statement in a computed property.

For instance, we write

<template>
  <div>
    <button>
      {{ btnText }}
    </button>
  </div>
</template>

<script>
export default {
  //...
  computed: {
    btnText() {
      switch (this.item.delta) {
        default:
          return "Nothing";
        case 0:
          return "Buy";
        case 1:
          return "Sell";
      }
    },
  },
  //...
};
</script>

to add the btnText computed property that checks the this.item.delta value with a switch statement.

We return 'Nothing' by default, 'Buy' if this.item.delta is 0, or 'Sell' if this.item.delta is 1.

Then we render btnText in the button as its text.

Conclusion

To add switch statement with Vue.js templates, we should put the switch statement in a computed property.

Sometimes, we want to push items into an array in the data object in Vue.js.

In this article, we’ll look at how to push items into an array in the data object in Vue.js.

How to push items into an array in the data object in Vue.js?

To push items into an array in the data object in Vue.js, we can make a copy of the object to append to the array before we call push with it.

For instance, we write

<script>
export default {
  //...
  data() {
    return {
      queue: [],
      purchase: {
        product: null,
        customer: null,
        quantity: null,
      },
    };
  },
  methods: {
    queuePurchase() {
      this.queue.push({ ...this.purchase });
    },
    //...
  },
  //...
};
</script>

to call this.queue.push with the copy of the this.purchase object.

Making a copy of the object will mean that only the original this.purchase object when we change the properties in it rather than this.purchase and the item in the this.queue array.

Conclusion

To push items into an array in the data object in Vue.js, we can make a copy of the object to append to the array before we call push with it.