Category: Vue

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.

Sometimes, we want to fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js.

In this article, we’ll look at how to fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js.

How to fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js?

To fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js, we should make sure the reactive property we’re referencing in the template is defined in the component code.

For instance, we write

<template>
  <span>{{ name }}</span>
</template>

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      name: "",
    };
  },
};
</script>

to define the name reactive property by returning the name property in the object returned in the data method,

And then we can reference the name value in the template without errors.

Conclusion

To fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js, we should make sure the reactive property we’re referencing in the template is defined in the component code.

Sometimes, we want to pass a value from Vue.js data to href.

In this article, we’ll look at how to pass a value from Vue.js data to href.

How to pass a value from Vue.js data to href?

To pass a value from Vue.js data to href, we can use template string literals.

For instance, we write

<template>
  <div><a :href="`/job/${r.id}`"</div>
</template>

to set the href prop to /job/${r.id} where r is a reactive property.

Conclusion

To pass a value from Vue.js data to href, we can use template string literals.

Sometimes, we want to use forEach to loop through two arrays at the same time in JavaScript.

In this article, we’ll look at how to use forEach to loop through two arrays at the same time in JavaScript.

How to use forEach to loop through two arrays at the same time in JavaScript?

To use forEach to loop through two arrays at the same time in JavaScript, we can use the index parameter of the forEach callback to get the element with the same index from the 2nd array.

For instance, we write

const n = [1, 2, 3, 5, 7, 8, 9, 11, 12, 13];
const m = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

n.forEach((num1, index) => {
  const num2 = m[index];
  console.log(num1, num2);
});

to call n.forEach with a callback that gets the element from m with the same index and assign it to num2.

And then we log the value of num1 and num2.

Conclusion

To use forEach to loop through two arrays at the same time in JavaScript, we can use the index parameter of the forEach callback to get the element with the same index from the 2nd array.