Category: Vue

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.

Sometimes, we want to call a Vue.js component method from outside the component.

In this article, we’ll look at how to call a Vue.js component method from outside the component.

How to call a Vue.js component method from outside the component?

To call a Vue.js component method from outside the component, we assign a ref to the component.

For instance, we write

<template>
  <div>
    <button @click="exec">Execute child component</button>
    <child-cmp ref="child" />
  </div>
</template>

<script>
export default {
  methods: {
    exec() {
      this.$refs.child.childMethod();
    },
  },
};
</script>

to assign a ref to the child-cmp component.

Then we define the exec method that calls the childMethod in the this.$refs.child component, which is the child-cmp component since we assigned the ref to it.

Then we set the click handler of the button to exec to call it when we click on the button.

Conclusion

To call a Vue.js component method from outside the component, we assign a ref to the component.