Category: Vue Answers

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.

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.