Categories
Vue Answers

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

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.

Categories
Vue Answers

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

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.

Categories
Vue Answers

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

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.

Categories
Uncategorized Vue Answers

How to watch store values from Vuex with Vue.js?

Sometimes, we want to watch store values from Vuex with Vue.js.

In this article, we’ll look at how to watch store values from Vuex with Vue.js.

How to watch store values from Vuex with Vue.js?

To watch store values from Vuex with Vue.js, we get the value from a getter.

For instance, we write

<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["myState"]),
  },
  watch: {
    myState(val, oldVal) {
      console.log(val, oldVal);
    },
  },
};
</script>

to call mapGetters to map the myState getter to the myState computed property.

Then we add a watcher for myState and get the current value with val and the previous value with oldVal.

Conclusion

To watch store values from Vuex with Vue.js, we get the value from a getter.

Categories
JavaScript Answers

How to stop CKEditor from adding unwanted characters with JavaScript?

To stop CKEditor from adding unwanted characters with JavaScript, w ecan set a few settings.

For instance, we write

CKEDITOR.editorConfig = (config) => {
  config.enterMode = CKEDITOR.ENTER_BR;
  config.entities = false;
  config.basicEntities = false;
};

to set the editorConfig to a function that sets the editor config.

We set enterMode to CKEDITOR.ENTER_BR to convert empty p elements to br elements.

And we set entities and basicEntities to stop characters from being escaped.