Category: JavaScript

Sometimes, we want to use 2 instances of Axios with different base URL in the same app with Vue.js.

In this article, we’ll look at how to use 2 instances of Axios with different base URL in the same app with Vue.js.

How to use 2 instances of Axios with different base URL in the same app with Vue.js?

To use 2 instances of Axios with different base URL in the same app with Vue.js, we create 2 axios instances.

For instance, we write

const instance = axios.create({
  baseURL: "https://example.com/api/",
  timeout: 1000,
  headers: { "X-Custom-Header": "foobar" },
});

to call axios.create to create an axios instance with a baseURL set.

We just repeat this with a different baseURL to create a new instance with the 2nd base URL.

Conclusion

To use 2 instances of Axios with different base URL in the same app with Vue.js, we create 2 axios instances.

Sometimes, we want to fix pushing to Vuex store array not working in Vue.js.

In this article, we’ll look at how to fix pushing to Vuex store array not working in Vue.js.

How to fix pushing to Vuex store array not working in Vue.js?

To fix pushing to Vuex store array not working in Vue.js, we should commit the mutation to change the array state.

For instance, we write

const store = new Vuex.Store({
  state: {
    customers: [{ id: 1, name: "user 1" }],
  },
  mutations: {
    addCustomer(state, customer) {
      state.customers.push(customer);
    },
  },
});

to add the addCustomer mutation that calls state.customers.push to add an entry to the customers state.

And then in our component, we write

<script>
//...
export default {
  //...
  methods: {
    addCustomer() {
      store.commit("addCustomer", { id: 2, name: "User 2" });
    },
  },
  //...
};
</script>

to call store.commit with 'addCustomer' and the item to add to commit the addCustomer mutation.

Conclusion

To fix pushing to Vuex store array not working in Vue.js, we should commit the mutation to change the array state.

Sometimes, we want to fix $route is not defined with Vue.js.

In this article, we’ll look at how to fix $route is not defined with Vue.js.

How to fix $route is not defined with Vue.js?

To fix $route is not defined with Vue.js, we should make sure have Vue Router in our Vue project and we use regular functions and this.$route in our methods and hooks.

For instance, we write

import Vue from "vue";
import Router from "vue-router";
//...
Vue.use(Router);

const router = new VueRouter({
  routes: [
    { path: "/videos", name: "allVideos", component: Videos },
    { path: "/videos/:id/edit", name: "editVideo", component: VideoEdit },
  ],
});

new Vue({
  el: "#app",
  router,
  //...
});

to add the Router plugin with Vue.use and add router into our Vue instance.

And then in our component methods, we write something like

<script>
//...
export default {
  //...
  data() {
    return {
      id: this.$route.params.id,
    };
  },
  //...
};
</script>

where data is a regular function instead of an arrow function.

Conclusion

To fix $route is not defined with Vue.js, we should make sure have Vue Router in our Vue project and we use regular functions and this.$route in our methods and hooks.

Sometimes, we want to access nested child components using refs with Vue.js.

In this article, we’ll look at how to access nested child components using refs with Vue.js.

How to access nested child components using refs with Vue.js?

To access nested child components using refs with Vue.js, we can use the $refs property of the parent component.

For instance, in the parent component, we write

<template>
  <div id="app">
    <my-component ref="myFirstLevelRefName"></my-component>
  </div>
</template>

Then in the child component, we write

<template>
  <div>
    <input ref="mySecondLevelRefName" value="Hello" />
  </div>
</template>

Then back in the parent component, we can access the input in the child component by writing

<script>
//...
export default {
  //...
  mounted() {
    console.log(
      this.$refs.myFirstLevelRefName.$refs.mySecondLevelRefName.value
    );
  },
  //...
};
</script>

We use this.$refs.myFirstLevelRefName.$refs.mySecondLevelRefName to get the input element in the child component from the parent component.

And then we get the input’s value with the value property.

Conclusion

To access nested child components using refs with Vue.js, we can use the $refs property of the parent component.

Sometimes, we want to check if a component exists with Vue.js.

In this article, we’ll look at how to check if a component exists with Vue.js.

How to check if a component exists with Vue.js?

To check if a component exists with Vue.js, we can check if the component name exists as a property key in the $options.components property.

For instance, we write

this.$options.components[componentName];

to check if the component with name set to componentName‘s value exists in the current component instance.

Likewise, we can do the same check for global components with

Vue.$options.components[componentName]

Conclusion

To check if a component exists with Vue.js, we can check if the component name exists as a property key in the $options.components property.