Category: JavaScript

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.

Sometimes, we want to add a Bootstrap tooltip inside Vue.js.

in this article, we’ll look at how to add a Bootstrap tooltip inside Vue.js.

How to add a Bootstrap tooltip inside Vue.js?

To add a Bootstrap tooltip inside Vue.js, we can create a directive.

For instance, we write

Vue.directive("tooltip", (el, binding) => {
  $(el).tooltip({
    title: binding.value,
    placement: binding.arg,
    trigger: "hover",
  });
});

to create the tooltip directive that calls Bootstrap’s tooltip jQuery method to create the tooltip with the tiyle and placement.

Then we can use the directive with

<span class="label label-default" v-tooltip:bottom="'Your tooltip text'"></span>

by setting the bottom placement modifier and the 'Your tooltip text' as the tooltip title text.

Conclusion

To add a Bootstrap tooltip inside Vue.js, we can create a directive.