Category: Vue

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.

Sometimes, we want to override scoped styles in Vue.js components.

In this article, we’ll look at how to override scoped styles in Vue.js components.

How to override scoped styles in Vue.js components?

To override scoped styles in Vue.js components, we add more specificity to the selector for the element with the styles we want to override.

For instance, we write

<template>
  <div class="wrapper">
    <comp-b>...</comp-b>
  </div>
</template>

<script>
import CompB from "@/.../CompB";

export default {
  components: {
    CompB,
  },
};
</script>

<style>
.wrapper .compb-header {
  color: red;
}
</style>

to set the element with class compb-header inside the element with class wrapper‘s color to red.

Conclusion

To override scoped styles in Vue.js components, we add more specificity to the selector for the element with the styles we want to override.

Sometimes, we want to get Vue Router router parameters into Vuex actions.

In this article, we’ll look at how to get Vue Router router parameters into Vuex actions.

How to get Vue Router router parameters into Vuex actions?

To get Vue Router router parameters into Vuex actions, we can import the router directly and use router.currentRoute.params to access the route URL parameter values.

For instance, we write

router.js

import Vue from "vue";
import VueRouter from "vue-router";
import routes from "./routes";

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  routes,
});

export default router;

to create our router and export it.

Then we write

import router from "@/router";

//...
router.currentRoute.params.id;
//...

to import the router and then use router.currentRoute.params.id to get the value of the id route URL parameter.

Conclusion

To get Vue Router router parameters into Vuex actions, we can import the router directly and use router.currentRoute.params to access the route URL parameter values.