Category: JavaScript

Sometimes, we want to access Vuex state when defining Vue Router routes.

In this article, we’ll look at how to access Vuex state when defining Vue Router routes.

How to access Vuex state when defining Vue Router routes?

To access Vuex state when defining Vue Router routes, we can import the store in the file with the Vue Router hooks.

For instance, we write

import Vuex from "vuex";

const store = new Vuex.Store({
  state: {
    globalError: "",
  },
  mutations: {
    setGlobalError(state, error) {
      state.globalError = error;
    },
  },
});

export default store;

to create a store and export it using the Vuex.Store constructor in store.js.

Then in router.js, we write

import Vue from "vue";
import VueRouter from "vue-router";
import store from "./store.js";

Vue.use(VueRouter);

const routes = [
  { path: "/home", name: "Home", component: Home },
  { path: "/login", name: "Login", component: Login },
  {
    path: "/secret",
    name: "Secret",
    component: SecretPage,
    meta: { requiresLogin: true },
  },
];

const router = new VueRouter({
  routes,
});

router.beforeEach((to, from, next) => {
  if (store.state.globalError) {
    //...
    next("/Login");
  } else {
    next();
  }
});

to add the routes array with the routes.

And then we create a VueRouter instance with the routes.

Next, we get the globalError store state from store.state.globalError in the beforeEach callback.

Conclusion

To access Vuex state when defining Vue Router routes, we can import the store in the file with the Vue Router hooks.

Sometimes, we want to pass props dynamically to dynamic component in Vue.js.

In this article, we’ll look at how to pass props dynamically to dynamic component in Vue.js.

How to pass props dynamically to dynamic component in Vue.js?

To pass props dynamically to dynamic component in Vue.js, we can check the current component being rendered in component and pass in the props accordingly.

For instance, we write

<template>
  <component :is="currentComponent" v-bind="currentProps"></component>
</template>

<script>
export default {
  //...
  data() {
    return {
      currentComponent: "myComponent",
    };
  },
  computed: {
    currentProps() {
      if (this.currentComponent === "myComponent") {
        return { foo: "baz" };
      }
    },
  },
  //...
};
</script>

to check the value of currentComponent in the currentProps` computed property.

And we return an object with the props we want to pass into the child component.

In the template, we add the component component to render the component that’s set with the name as the value of the is prop.

And we set the v-bind directive to currentProps to pass the properties inside the object as props.

Conclusion

To pass props dynamically to dynamic component in Vue.js, we can check the current component being rendered in component and pass in the props accordingly.

Sometimes, we want to display unescaped HTML in Vue.js.

In this article, we’ll look at how to display unescaped HTML in Vue.js.

How to display unescaped HTML in Vue.js?

To display unescaped HTML in Vue.js, we can set the v-html directive to the reactive property string with the HTML we want to display.

For instance, we write

<template>
  <section v-html="desc"></section>
</template>

to add the v-html directive to the section element and set its value to desc to render as the content of desc as raw HTML.

Conclusion

To display unescaped HTML in Vue.js, we can set the v-html directive to the reactive property string with the HTML we want to display.

Sometimes, we want to listen for props changes with Vue.js

In this article, we’ll look at how to listen for props changes with Vue.js.

How to listen for props changes with Vue.js?

To listen for props changes with Vue.js, we can add a watcher for the prop.

For instance, we write

<script>
export default {
  //...
  watch: {
    myProp: {
      immediate: true,
      handler(val, oldVal) {
        // ...
      },
    },
  },
  //...
};
</script>

to watch the value of the myProp prop by setting watch.myProp to an object with immediate set to true to watch the initial value of the myProp prop.

And we set handler to a function that gets the val and oldVal values to get the new and old value of the myProp prop value respectively.

Conclusion

To listen for props changes with Vue.js, we can add a watcher for the prop.

Sometimes, we want to get selected option on @change with Vue.js.

In this article, we’ll look at how to get selected option on @change with Vue.js.

How to get selected option on @change with Vue.js?

To get selected option on @change with Vue.js, we can set @change to a method that calls $event.

For instance, we write

<template>
  <select name="leaveType" @change="onChange($event)" v-model="key">
    <option value="1">Off-Day</option>
    <option value="2">On Demand Leave</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      key: "",
    };
  },
  methods: {
    onChange(event) {
      console.log(event.target.value);
    },
  },
};
</script>

to add the onChange method that has the event parameter.

In the template, we set @change of the select element to onChange($event) to call onChange when we change the selection in the drop down.

The $event object has the native change event emitted by the select element.

So we can get the latest selected value from event.target.value.

Conclusion

To get selected option on @change with Vue.js, we can set @change to a method that calls $event.