Category: Vue

Sometimes, we want to change body styles in Vue Router.

In this article, we’ll look at how to change body styles in Vue Router.

How to change body styles in Vue Router?

To change body styles in Vue Router, we can add a watcher for the $route object and then change the styles in the watcher.

For instance, we write

<script>
export default {
  //...
  watch: {
    $route: {
      handler(to, from) {
        const [body] = document.getElementsByTagName("body");
        if (from !== undefined) {
          body.classList.remove(`page-${from.name.toLowerCase()}`);
        }
        body.classList.add(`page-${from.name.toLowerCase()}`);
      },
      immediate: true,
      deep: true,
    },
  },
  //...
};
</script>

to add a watcher for the $route object.

We get the body element with getElementsByTagName.

Then we call body.classList.remove to remove the class if from isn’t undefined.

And then we call body.classList.add to add the class again.

We set immediate to true so the watcher runs immediately when the page loads.

And we set deep to true to run the watcher when any content in the $route object changes.

Conclusion

To change body styles in Vue Router, we can add a watcher for the $route object and then change the styles in the watcher.

Sometimes, we want to access async store data in Vue Router for usage in beforeEnter hook.

In this article, we’ll look at how to access async store data in Vue Router for usage in beforeEnter hook.

How to access async store data in Vue Router for usage in beforeEnter hook?

To access async store data in Vue Router for usage in beforeEnter hook, we can set beforeEnter to an async function.

For instance, we write

const routes = [
  //...
  {
    path: "/example",
    component: Example,
    beforeEnter: async (to, from, next) => {
      const response = await store.dispatch("initApp");
      //...
    },
  },
  //...
];

to set beforeEnter to an async function that calls store.dispatch.

We get the promise it returns and use await to get the response value.

Conclusion

To access async store data in Vue Router for usage in beforeEnter hook, we can set beforeEnter to an async function.

Sometimes, we want to re-initialize data in Vue.js.

In this article, we’ll look at how to re-initialize data in Vue.js.

How to re-initialize data in Vue.js?

To re-initialize data in Vue.js, we can use the Object.assign method with this.$data.

For instance, we write

<script>
//...
const initialState = () => {
  return {
    h2: 0,
    ch4: 0,
    //...
  };
};
//...
export default {
  //...
  data() {
    return initialState();
  },
  methods: {
    resetFields() {
      Object.assign(this.$data, initialState());
    },
  },
  //...
};
</script>

to call Object.assign with the this.$data property and the object returned by the initialState function to reset the reactive properties to the initial values.

We use the same object returned by initialState as the initial values of the reactive properties.

Conclusion

To re-initialize data in Vue.js, we can use the Object.assign method with this.$data.

Sometimes, we want to fix v-cloak not working in Vue.js.

In this article, we’ll look at how to fix v-cloak not working in Vue.js.

How to fix v-cloak not working in Vue.js?

To fix v-cloak not working in Vue.js, we’ve to set the styles for [v-cloak] to hide the items.

For instance, we write

<template>
  <div id="app">
    <div v-cloak>
      {{ message }}
    </div>
  </div>
</template>

to add the v-cloak directive.

Then we hide the content of the div before it’s rendered with

<style>
[v-cloak] {
  display: none;
}
</style>

Conclusion

To fix v-cloak not working in Vue.js, we’ve to set the styles for [v-cloak] to hide the items.

Sometimes, we want to pass a parameter to Vue.js @click event handler.

In this article, we’ll look at how to pass a parameter to Vue.js @click event handler.

How to pass a parameter to Vue.js @click event handler?

To pass a parameter to Vue.js @click event handler, we can set @click to a function call.

For instance, we write

<template>
  <div id="app">
    ...
    <button @click="addToCount(item.contactID)">add</button>
    ...
  </div>
</template>

to call addToCount with item.contactId.

Then we write

<script>
//...
export default {
  //...
  methods: {
    addToCount(paramContactID) {
      // ... 
    },
  },
  //...
};
</script>

to add the addToCount method which has the paramContactID parameter.

Therefore, paramContactID will be set to item.contactId as its value when we click the button.

Conclusion

To pass a parameter to Vue.js @click event handler, we can set @click to a function call.