Author: John Au-Yeung

Sometimes, we want to do something when we mouse over or hover over an element with Vue.js.

In this article, we’ll look at how to do something when we mouse over or hover over an element with Vue.js.

Do Something When we Mouse Over or Hover Over an Element with Vue.js

To do something when we mouse over or hover over an element with Vue.js, we can listen to the mouseover and mouseleave events.

For instance, we can write:

<template>
  <div id="app">
    <div @mouseover="hovered = true" @mouseleave="hovered = false">
      <p>hello world</p>
      <p v-show="hovered">hovered</p>
    </div>
  </div>
</template>

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

We have the hovered reactive property which is set to false initially.

Then we add the @mouseover directive and set its value to hovered = true , and we set the @mouseover directive to hovered = false to toggle the hovered reactive property when we move our more into the div and out of it respectively.

And we have the v-show directive to show the second p element when hovered is true .

Now when our mouse is in the div, we see ‘hovered’ displayed.

And we move our mouse out of the div, ‘hovered’ disappears.

Conclusion

To do something when we mouse over or hover over an element with Vue.js, we can listen to the mouseover and mouseleave events.

Sometimes, we want to get the selected option on change with Vue.js.

In this article, we’ll look at how to get the selected option on change with Vue.js.

Get the Selected Option on Change with Vue.js

We can get the selected option on change with Vue.js by setting @change to a method.

For instance, we can write:

<template>
  <div id="app">
    <select name="fruit" @change="onChange($event)" v-model="key">
      <option value="1">apple</option>
      <option value="2">orange</option>
    </select>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { key: "" };
  },
  methods: {
    onChange(event) {
      console.log(event.target.value, this.key);
    },
  },
};
</script>

We set v-model to the key reactive property bind the selected value attribute value to key .

And we set @change to onChange($event) to call onChange with the change event object.

In onChange , we get the event object, and get the selected value attribute value with event.target.value .

And we get the same value with this.key since we bound it to the selected value attribute value with v-model .

Alternative, we can remove ($event) and write:

<template>
  <div id="app">
    <select name="fruit" @change="onChange" v-model="key">
      <option value="1">apple</option>
      <option value="2">orange</option>
    </select>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { key: "" };
  },
  methods: {
    onChange(event) {
      console.log(event.target.value, this.key);
    },
  },
};
</script>

to get the same result.

Conclusion

We can get the selected option on change with Vue.js by setting @change to a method.

Sometimes, we want to call multiple functions with the v-on:click or @clicik directive with Vue.js.

In this article, we’ll look at how to call multiple functions with the v-on:click or @clicik directive with Vue.js.

Call Multiple Functions with v-on:click Directive in Vue.js

We call multiple functions with the v-on:click or @clicik directive with Vue.js by calling both functions in the @click directive’s value.

For instance, we can write:

<template>
  <div id="app">
    <div
      @click="
        firstFunction();
        secondFunction();
      "
    >
      click me
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    firstFunction() {
      console.log("first");
    },
    secondFunction() {
      console.log("second");
    },
  },
};
</script>

We just call firstFunction and secondFunction in @click , and then both methods will be called.

And so when we click on the div, we see 'first' and 'second' logged.

Conclusion

We call multiple functions with the v-on:click or @clicik directive with Vue.js by calling both functions in the @click directive’s value.

Sometimes, we want to set a unique ID for each component instance in Vue.js.

In this article, we’ll look at how to set a unique ID for each component instance in Vue.js.

Set a Unique ID for Each Component Instance

We can set a unique ID for each component instance with the uuid library.

To install it, we run npm i uuid .

Then we set the UUID as the ID of the element by writing:

<template>
  <div id="app">
    <div>
      <label :for="id">Label text for {{ id }}</label>
      <input :id="id" type="text" />
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
export default {
  name: "App",
  data() {
    return {
      id: null,
    };
  },
  mounted() {
    this.id = uuidv4();
  },
};
</script>

We create the unique ID with the uuidv4 function.

And we pass that in as the value for the for and id props.

Now the input has its own unique ID.

Conclusion

We can set a unique ID for each component instance with the uuid library.

Sometimes, we want to get an element within a component with Vue.js.

In this article, we’ll look at how to get an element within a component with Vue.js.

Get an Element within a Component with Vue.js

To get an element within a component with Vue.js, we can assign a ref to the element we want to get.

Then we can get the element with the this.$refs property in any lifecycle or regular methods.

For instance, we can write:

<template>
  <div id="app">
    <span ref="someName" class="foo bar">Child Span</span>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    const childSpanClassAttr = this.$refs.someName.getAttribute("class");
    console.log(childSpanClassAttr);
  },
};
</script>

We set the ref attribute of the span to someName .

Then we can the span by writing this.$refs.someName in any lifecycle or regular methods.

And we can call any DOM element method like getAttribute on it.

We get the value of the class attribute with 'class' as the argument of getAttribute .

Therefore, the console log logs 'foo bar’ .

Conclusion

To get an element within a component with Vue.js, we can assign a ref to the element we want to get.

Then we can get the element with the this.$refs property in any lifecycle or regular methods.