Category: Vue 3

Sometimes, we may want to disable inputs conditionally in our Vue 3 apps.

In this article, we’ll look at how to disable input elements conditionally in Vue 3.

Disable Input Conditionally in Vue.js 3

We can disable inputs conditionally with Vue 3 by setting the disabled prop to the condition when we want to disable the input.

For instance, we can write:

<template>
  <input :disabled="disabled" />
  <button @click="disabled = !disabled">toggle disable</button>
</template>

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

We have the input with the disabled prop set to the disabled reactive property.

Below that, we have the @click directive to toggle the disabled reactive property when we click the button.

When disabled is true , then the input will be disabled.

So when we click the button repeatedly, the input will be disabled and enabled again.

Conclusion

We can conditionally disable an input with Vue 3 by setting the disabled prop of the input to an expression that has the condition of when we want to disable the input.

Sometimes we want to add a menu with the active menu item highlighted in our Vue 3 app.

In this article, we’ll look at how to add a menu with active item highlighting with Vue 3.

Add a Menu with Active Item Highlighting

To add a menu with the active item highlighting in our Vue 3 app, we can listen to the mouseenter and mouseleave events.

We add the highlight to the item that’s hovered over when the mouseenter event is emitted.

And when the mouseleave event is emitted, we clear the highlights on all items.

To do this, we write:

<template>
  <ul>
    <li
      :class="{ hovered: hoveredItem === 'apple' }"
      @mouseenter="hoveredItem = 'apple'"
      @mouseleave="resetHover()"
    >
      apple
    </li>
    <li
      :class="{ hovered: hoveredItem === 'orange' }"
      @mouseenter="hoveredItem = 'orange'"
      @mouseleave="resetHover()"
    >
      orange
    </li>
    <li
      :class="{ hovered: hoveredItem === 'grape' }"
      @mouseenter="hoveredItem = 'grape'"
      @mouseleave="resetHover()"
    >
      grape
    </li>
    <li
      :class="{ hovered: hoveredItem === 'pear' }"
      @mouseenter="hoveredItem = 'pear'"
      @mouseleave="resetHover()"
    >
      pear
    </li>
    <li
      :class="{ hovered: hoveredItem === 'banana' }"
      @mouseenter="hoveredItem = 'banana'"
      @mouseleave="resetHover()"
    >
      banana
    </li>
  </ul>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      hoveredItem: "",
    };
  },
  methods: {
    resetHover() {
      this.hoveredItem = "";
    },
  },
};
</script>

<style scoped>
.hovered {
  color: red;
}
</style>

We have the li elements that have the hovered class applied dynamically.

We apply the class when the hoveredItem ‘s value is the same one that’s set in the mouseenter event handler.

And we call the resetHover method to reset hoveredItem to an empty string when our mouse leaves an item.

We have the hoveredItem reactive property to keep track of which item is highlighted.

And we have the .hovered class that has the color set to red to add the highlighting.

Now when we hover over an item, we should see the item that our mouse hovered over becomes red.

When our mouse leaves the item, then the items turn back to black.

Conclusion

We can add a menu with active items highlighting with Vue 3 easily.

To do this, we just listen to the mouseenter and mouseleave events and applies the class to add the highlight accordingly.

Sometimes, we may want to call a Vue 3 component method from outside the component.

In this article, we’ll look at how to call a Vue 3 component method from outside the component.

Assign a Ref to the Component and Call the Method From it

We can assign a ref to a component and get the method from the ref object and call it.

For instance, we can write:

App.vue

<template>
  <HelloWorld ref="helloWorld" />
  <button @click="greet">greet</button>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  methods: {
    greet() {
      this.$refs.helloWorld.greet("jane");
    },
  },
};
</script>

components/HelloWorld.vue

<template>
  <div>hello world</div>
</template>

<script>
export default {
  methods: {
    greet(name) {
      console.log(`hello world ${name}`);
    },
  },
};
</script>

We assign the helloWorld ref to the HelloWorld component.

Then we add the greet method that calls this.$refs.helloWorld.greet method which is the greet method from the HelloWorld component.

Therefore, we should see the 'hello world jane' logged when we click the greet button.

This lets us call a method in the child component from the parent.

Send an Event from the Child Component to the Parent

If we want to call a method in the parent component from the child component, then we should call the $emit method from the child component and listen to the event emitted by the child component in the parent component.

For instance, we can write:

App.vue

<template>
  <HelloWorld @greet="greet" />
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  methods: {
    greet(name) {
      console.log(`hello world ${name}`);
    },
  },
};
</script>

components/HelloWorld.vue

<template>
  <div>hello world</div>
  <button @click="greet">greet</button>
</template>

<script>
export default {
  methods: {
    greet() {
      this.$emit("greet", "jane");
    },
  },
};
</script>

In HelloWorld.vue , we have the greet method which calls this.$emit with the event name as the first argument and the event payload as the 2nd argument.

Subsequent arguments are also event payloads which will be used as 2nd and subsequent arguments of the event handler method.

Then in App.vue , listen to the greet event with the @greet directive.

We set its value to greet to get the value we passed in as the 2nd argument.

So name is 'jane' .

And we should see 'hello world jane' logged when we click the greet button.

Conclusion

To call methods in a child component from the parent, we assign a ref to the component and get its methods from there.

If we want to call a method in the parent component from the child, then we emit an event in the child component and listen to that event in the parent component.

Sometimes, we may want to add query parameters to route URLs so that we can get the query parameters in the component.

In this article, we’ll look at how to get query parameters from a URL in a Vue 3 app that uses Vue Router 4.

Get Query Parameters from a URL in Vue.js 3 with Vue Router 4

To get query parameter from a URL in a Vue 3 app that uses Vue Router 4, we can get the query parameters from the this.$route.query property.

main.js

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";
import Page1 from "./views/Page1";
import Page2 from "./views/Page2";
import Page3 from "./views/Page3";

const routes = [
  { path: "/", component: Page1 },
  { path: "/page2", component: Page2 },
  { path: "/page3", component: Page3 }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

const app = createApp(App);
app.use(router);
app.mount("#app");

App.vue

<template>
  <router-link to="/">page 1</router-link>
  <router-link to="/page2">page 2</router-link>
  <router-link to="/page3">page 3</router-link>
  <router-view></router-view>
</template>

<script>
export default {
  name: "App"
};
</script>

views/Page1.vue

<template>
  <div>page 1</div>
</template>

views/Page2.vue

<template>
  <div>page 2</div>
</template>

views/Page3.vue

<template>
  <div>page 3 {{ $route.query.foo }}</div>
</template>

<script>
export default {};
</script>

We set up the routes in main.js .

We import the page components and put them in the routes array.

Next, we call createRouter to create the router object.

Then we add the routes to the object we pass into createRouter ,

Then we have:

app.use(router);

to add the router to our app.

In Page3.vue , we have $router.query.foo in the template to get the foo query parameter.

This is the same as this.$router.query.foo in the component object.

In App.vue , we have the 3rd router-link ‘s to prop with a query string added after the path.

So when we click the link, we should see ‘bar’ displayed since we have foo=bar in the query string.

Conclusion

We can get query parameters in our Vue 3 app that uses Vue Router 4 with the this.$route.query property in a component.