Category: Vue Answers

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.

Sometimes, we want to hide Vue.js template before it is rendered.

In this article, we’ll look at how to hide Vue.js template before it is rendered.

How to hide Vue.js template before it is rendered?

To hide Vue.js template before it is rendered, we add the v-cloak directive and set its style.

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 hide Vue.js template before it is rendered, we add the v-cloak directive and set its style.