Category: Vue Answers

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.

Sometimes, we want to pass parameters in computed properties in Vue.js.

In this article, we’ll look at how to pass parameters in computed properties in Vue.js.

How to pass parameters in computed properties in Vue.js?

To pass parameters in computed properties in Vue.js, we add a method.

For instance, we write

<template>
  <div>
    <span>{{ fullName("Hi") }}</span>
  </div>
</template>

<script>
export default {
  //...
  methods: {
    fullName(salut) {
      return `${salut} ${this.firstName} ${this.lastName}`;
    },
  },
};
</script>

to add the fullName method that takes the salut parameter and return a string combined with the firstName and lastName reactive properties.

Then we call fullname with 'Hi' to render the string returned by fullName.

Conclusion

To pass parameters in computed properties in Vue.js, we add a method.

Sometimes, we want to fix Vue v-on:click does not work on component.

In this article, we’ll look at how to fix Vue v-on:click does not work on component.

How to fix Vue v-on:click does not work on component?

To fix Vue v-on:click does not work on component, we add the native modifier.

For instance, we write

<template>
  <div id="app">
    <test @click.native="testFunction"></test>
  </div>
</template>

to add a native click handler to the root element of the test component by using the @click.native directive.

We set it to testFunction so when the root element of test is clicked, testFunction is called.

Conclusion

To fix Vue v-on:click does not work on component, we add the native modifier.