Category: JavaScript

Sometimes, we want to get current route name in Nuxt.js.

In this article, we’ll look at how to get current route name in Nuxt.js.

How to get current route name in Nuxt.js?

To get current route name in Nuxt.js, we can use the this.$route.name property.

For instance, we write

<script>
//...
export default {
  //...
  methods: {
    get() {
      console.log(this.$route.name);
    },
  },
  //...
};
</script>

to log the name of the current route by logging the value of this.$route.name in the get method.

Conclusion

To get current route name in Nuxt.js, we can use the this.$route.name property.

Sometimes, we want to send JSON web token (JWT) in an Axios GET request.

In this article, we’ll look at how to send JSON web token (JWT) in an Axios GET request.

How to send JSON web token (JWT) in an Axios GET request?

To send JSON web token (JWT) in an Axios GET request, we can add it to the headers.

For instance, we write

<script>
export default {
  //...
  get() {
    const url = "...";
    const token = "...";
    const config = {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    };
    axios.get(url, config);
  },
  //...
};
</script>

to call axios.get with the url and config.

In config, we add the headers by setting the headers property to an object that has the Authorization header set to the token value.

Conclusion

To send JSON web token (JWT) in an Axios GET request, we can add it to the headers.

To watch refs with Vue.js, we can watch the reactive properties in the ref if the ref is assigned to a component.

For instance, we write

<template>
  <div>
    <counter ref="counter" />
  </div>
</template>

<script>
export default {
  //...
  components: { Counter },
  mounted() {
    this.$watch(
      () => {
        return this.$refs.counter.i;
      },
      (val) => {
        console.log(val);
      }
    );
  },
  //...
};
</script>

to watch the counter‘s i reactive property.

Since we assigned the counter ref to the counter component, i is a reactive property in counter.

We call this.$watch with a function to return this.$refs.counter.i to watch the value.

And we have

(val) => {
  console.log(val);
};

to log the value of this.$refs.counter.i.

Sometimes, we want to watch a deeply nested object with Vue.js.

In this article, we’ll look at how to watch a deeply nested object with Vue.js.

How to watch a deeply nested object with Vue.js?

To watch a deeply nested object with Vue.js, we can use the property path as the key for the watcher method.

For instance, we write

<script>
export default {
  //...
  watch: {
    "block.checkbox.active"() {
      this.block.someotherprop.changeme = 5;
    },
  },
  //...
};
</script>

to watch the block.checkbox.active reactive property for changes.

When it changes, we run

this.block.someOtherProp = 5;

to set this.block.someOtherProp to 5.

Conclusion

To watch a deeply nested object with Vue.js, we can use the property path as the key for the watcher method.

Sometimes, we want to search a list while typing in textbox Vue.js.

In this article, we’ll look at how to search a list while typing in textbox Vue.js.

How to search a list while typing in textbox Vue.js?

To search a list while typing in textbox Vue.js, we can add a computed property.

For instance, we write

<template>
  <div>
    <input type="text" v-model="search" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: "",
      customers: [
        {
          id: "1",
          name: "user 1",
          profile_pic: "...",
          email: "ab@gmail.com",
          phone: "5786965906",
          unread: "0",
        },
        {
          id: "2",
          name: "user 2",
          profile_pic: "...",
          email: "abcd@gmail.com",
          phone: "576676886",
          unread: "0",
        },
        {
          id: "3",
          name: "user 3",
          profile_pic: "...",
          email: "test@gmail.com",
          phone: "67689696",
          unread: "0",
        },
        {
          id: "4",
          name: "user 4",
          profile_pic: "...",
          email: "d@gmail.com",
          phone: "576865896",
          unread: "0",
        },
      ],
    };
  },
  computed: {
    filteredCustomer() {
      return this.customers.filter((cust) => {
        return cust.name.toLowerCase().includes(self.search.toLowerCase());
      });
    },
  },
};
</script>

to add the filteredCustomer computed property that returns an array of items from this.customers with the name values that includes the search string search.

We bind the search reactive property to the input value with v-model so filteredCustomer is updated as we type.

Conclusion

To search a list while typing in textbox Vue.js, we can add a computed property.