Categories
Vue Answers

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

Labrador retriever puppy walking on green grass

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?

Labrador retriever puppy walking on green grass

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?

Labrador retriever puppy walking on green grass

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?

Labrador retriever puppy walking on green grass

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.

Categories
JavaScript Answers

How to make a put request with simple string as request body with JavaScript?

Labrador retriever puppy walking on green grass

To make a put request with simple string as request body with JavaScript, we set the Content-Type header.

For instance, we write

const response = await axios.put("http://localhost:4000/api/token", "myToken", {
  headers: { "Content-Type": "text/plain" },
});

to call axios.put to make a put request.

The first argument is the request URL, the 2nd argument is the request body, and the last argument is an object with the request headers.

We set the Content-Type header to text/plain to let us send a string request body.