Category: Vue

Sometimes, we want to make helper functions globally available to single-file components with Vue.js.

In this article, we’ll look at how to make helper functions globally available to single-file components with Vue.js.

Make Helper Functions Globally Available to Single-File Components with Vue.js

We can create mixins to make helper functions globally available to single-file components with Vue.js.

For instance, we can write:

<template>
  <div id="app">
    {{ capitalizedName }}
  </div>
</template>

<script>
import Vue from "vue";

Vue.mixin({
  methods: {
    capitalizeFirstLetter: (str) => str[0].toUpperCase() + str.slice(1),
  },
});
export default {
  name: "App",
  data() {
    return {
      name: "james",
    };
  },
  computed: {
    capitalizedName() {
      return this.capitalizeFirstLetter(this.name);
    },
  },
};
</script>

We call Vue.mixin with an object to make our own mixin.

It creates a global mixin so it’ll be available to all components automatically.

In the object, we have the methods property which is set to an object with some component methods.

It has the capitalizeFirstLetter method which takes a string and returns a string with the first letter capitalized.

Next, we return the name reactive property in the data method.

And then we create the capitalizedName computed property which calls the capitalizeFirstLetter method from the mixin with this.name and returns the returned result.

Next, we add capitalizedName to the template to render it.

And we see ‘James’ displayed as a result.

Conclusion

We can create mixins to make helper functions globally available to single-file components with Vue.js.

Sometimes, we want to pass props as initial data in Vue.js.

In this article, we’ll look at how to pass props as initial data in Vue.js.

Pass Props as Initial Data in Vue.js

We can pass props as initial data in Vue.js by setting the initial value of a reactive property to the prop’s value.

For instance, we can write:

App.vue

<template>
  <div id="app">
    <HelloWorld msg="world" />
  </div>
</template>

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

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

HelloWorld.vue

<template>
  <div class="hello">
    <h1>hello {{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      message: this.msg,
    };
  },
};
</script>

In HelloWorld , we set message to this.msg as message ‘s initial value.

We make a copy of the this.msg string and set it as message ‘s value.

If it’s not a primitive value, then we’ve to make a copy of the prop’s value with Object.assign or the spread operator.

Conclusion

We can pass props as initial data in Vue.js by setting the initial value of a reactive property to the prop’s value.

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.