Category: JavaScript

Sometimes, we want to fix Vue v-on:click not working on a component

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

How to fix Vue v-on:click not working on a component?

To fix Vue v-on:click not working on a component, we need to add the native modifier so that Vue will listen for native events on the component.

For instance, we write

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

to set @click.native to testFunction to call testFunction with a click is done on anything in the test component.

Conclusion

To fix Vue v-on:click not working on a component, we need to add the native modifier so that Vue will listen for native events on 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 can assign a ref to our component and then we can call the component’s method with it.

For instance, we write

<template>
  <my-component ref="foo"></my-component>
</template>

<script>
//...
export default {
  //...
  components: { "my-component": myComponent },
  methods: {
    doSomething() {
      this.$refs.foo.doSomething();
    },
  },
  //...
};
</script>

to assign the foo ref to my-component.

Then we call this.$refs.foo.doSomething(); in the doSomething method where this.$refs.foo references the my-component component instance.

Conclusion

To call a Vue.js component method from outside the component, we can assign a ref to our component and then we can call the component’s method with it.

In this article, we’ll look the difference between v-model and v-bind in Vue.js.

What’s the difference between v-model and v-bind in Vue.js?

The difference between v-model and v-bind in Vue.js is the v-bind lets us pass a prop from parent to child.

v-model is the combination of v-bind:value and the input event.

For instance,

<template>
  <input v-model="something" />
</template>

//...

is the same as

<template>
  <input
    v-bind:value="something"
    v-on:input="something = $event.target.value"
  />
</template>

//...

or

<input
   :value="something"
   @input="something = $event.target.value"
>

for short.

: is the shorthand for v-bind and @ is the shorthand for v-on:input.

Conclusion

The difference between v-model and v-bind in Vue.js is the v-bind lets us pass a prop from parent to child.

v-model is the combination of v-bind:value and the input event.

Sometimes, we want to add an event bus with Vue.js 3.

In this article, we’ll look at how to add an event bus with Vue.js 3.

How to add an event bus with Vue.js 3?

To add an event bus with Vue.js 3, we can use the mitt package.

To install it, we run

npm install --save mitt

Then we use it by writing

import { createApp } from "vue";
import App from "./App.vue";
import mitt from "mitt";
const emitter = mitt();
const app = createApp(App);
app.config.globalProperties.emitter = emitter;
app.mount("#app");

in our app’s entry point file.

We make emitter available to all components with

app.config.globalProperties.emitter = emitter;

Then we use it by writing

<template>
  <header>
    <button @click="toggleSidebar">toggle</button>
  </header>
</template>

<script>
export default {
  data() {
    return {
      sidebarOpen: true,
    };
  },
  methods: {
    toggleSidebar() {
      this.sidebarOpen = !this.sidebarOpen;
      this.emitter.emit("toggle-sidebar", this.sidebarOpen);
    },
  },
};
</script>

We call this.emitter.emit to emit the toggle-sidebar event.

Then in another component, we write

<template>
  <aside class="sidebar" :class="{ 'sidebar--toggled': !isOpen }">...</aside>
</template>
<script>
export default {
  name: "sidebar",
  data() {
    return {
      isOpen: true,
    };
  },
  mounted() {
    this.emitter.on("toggle-sidebar", (isOpen) => {
      this.isOpen = isOpen;
    });
  },
};
</script>

to call this.emitter.on to listen to the toggle-siderbar event and get the value in the 2nd argument of emit from the isOpen parameter in the callback.

Conclusion

To add an event bus with Vue.js 3, we can use the mitt package.

Sometimes, we want to fix Axios can’t set data in Vue.js.

In this article, we’ll look at how to fix Axios can’t set data in Vue.js.

How to fix Axios can’t set data in Vue.js?

To fix Axios can’t set data in Vue.js, we should make sure methods and hook methods are all regular functions.

For instance, we write

<template>
  <span>{{ data }}</span>
</template>

<script>
export default {
  name: "MyComponent",
  //...
  async beforeMount() {
    const { data } = await axios.get("http://127.0.0.1/api/bills");
    this.data = data;
  },
  //...
};
</script>

to add the beforeMount hook by setting the beforeMount property to a regular function.

In it, we call axios.get to make a GET request.

Then we get the response body from the data property returned by the promise.

Finally, we set this.data to data so that we can use the data from the request elsewhere in the component.

this should be referencing the current component instance since beforeMount is set to a regular function.

Conclusion

To fix Axios can’t set data in Vue.js, we should make sure methods and hook methods are all regular functions.