Category: Vue

Sometimes, we want to properly watch for nested data with Vue.js.

In this article, we’ll look at how to properly watch for nested data with Vue.js.

How to properly watch for nested data with Vue.js?

To properly watch for nested data with Vue.js, we add a watcher for the property we want to watch.

For instance, we write

new Vue({
  el: "#myElement",
  data: {
    entity: {
      properties: [],
    },
  },
  watch: {
    "entity.properties": {
      handler(after, before) {
        // ...
      },
      deep: true,
    },
  },
});

to watch the entity.properties reactive property for changes.

handler is called when the value changes.

We set deep to true to watch for changes in all levels of the property is entity.properties is an object.

Conclusion

To properly watch for nested data with Vue.js, we add a watcher for the property we want to watch.

Sometimes, we want to disable input conditionally with Vue.js.

In this article, we’ll look at how to disable input conditionally with Vue.js.

How to disable input conditionally with Vue.js?

To disable input conditionally with Vue.js, we set the disabled prop.

For instance, we write

<template>
  <button class="btn btn-default" :disabled="clickable">Click me</button>
</template>

<script>
export default {
  computed: {
    clickable() {
      return true;
    },
  },
};
</script>

to define the clickable computed property in the component code.

Then we set the disabled prop to the clickable computed property to disable it if it’s true.

Conclusion

To disable input conditionally with Vue.js, we set the disabled prop.

Sometimes, we want to force Vue.js to reload or re-render.

In this article, we’ll look at how to force Vue.js to reload or re-render.

How to force Vue.js to reload or re-render?

To force Vue.js to reload or re-render, we use the $forceUpdate method.

For instance, we write

this.$forceUpdate();

to call this.$forceUpdate(); in our component to force the component to re-render.

Conclusion

To force Vue.js to reload or re-render, we use the $forceUpdate method.

Sometimes, we want to remove hashbang #! from URL with Vue.js and Vue Router.

In this article, we’ll look at how to remove hashbang #! from URL with Vue.js and Vue Router.

How to remove hashbang #! from URL with Vue.js and Vue Router?

To remove hashbang #! from URL with Vue.js and Vue Router, we disable hash mode.

For instance, we write

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  // ...
});

with Vue Router 4 to call createWebHashHistory and set= the returned value as the value of the history property to disable hash mode.

With Vue Router 3, we write

const router = new VueRouter({
  mode: "history",
  // ...
});

to create a VueRouter instance with mode set to 'history' to disable hash mode.

Conclusion

To remove hashbang #! from URL with Vue.js and Vue Router, we disable hash mode.

Sometimes, we want to fix ‘TypeError: this.getOptions is not a function’ with Vue.js.

In this article, we’ll look at how to fix ‘TypeError: this.getOptions is not a function’ with Vue.js.

How to fix ‘TypeError: this.getOptions is not a function’ with Vue.js?

To fix ‘TypeError: this.getOptions is not a function’ with Vue.js, we instakll a few sass packages.

First, we add

"sass-loader": "7.3.1",

into package.json in devDependencies

Then we run

npm i -D sass

or

yarn add sass --dev

to install the sass package.

Then we remove the node_modules folder.

And finally, we run

npm install

or

yarn

to reinstall all packages.

Conclusion

To fix ‘TypeError: this.getOptions is not a function’ with Vue.js, we instakll a few sass packages.