Multiple v-model in Vue 3

Hello Readers,

With the release of Vue 3 now we can add multiple v-model for two-way data binding in a more standardized way on the same component with more flexibility.

As given in Vue 3 document the syntax of using v-model on a custom component is similar by-passing modelValue as a prop and emitting an update:modelValue event.

<custom-multiple-input
  :modelValue="msg"
  @update:modelValue="msg= $event"
/>
/* the above code can be written as */

<custom-multiple-input v-model="msg" />

v-model as an argument:

Instead of changing the model name or option now we are able to pass an argument to v-model as shown below.

<custom-multiple-input v-model:title="heading" v-model:subHeading="pageSubHeading" />

<!-- it can be done as: -->

<custom-multiple-input :title="heading" @update:title="heading = $event"
:subHeading="pageSubHeading"
@update:subHeading="pageSubHeading = $event" />

For better understanding let us see an example. In this example, we will create a custom input that will have username, email, and mobile.

Step 1: Create a component named as CustomMultipleInput.vue and add the following code.

<template>
  <div class="flex flex-col w-1/3 mx-auto">
    <input
      type="text"
      :value="username"
      class="border shadow border-blue-200 rounded-md p-2 mb-3"
      placeholder="username"
      @input="$emit('update:username', $event.target.value)"
    />
    <input
      type="email"
      :value="email"
      @input="$emit('update:email', $event.target.value)"
      class="border shadow border-blue-200 rounded-md p-2 mb-3"
      placeholder="email"
    />
    <input
      type="number"
      :value="mobile"
      @input="$emit('update:mobile', $event.target.value)"
      class="border shadow border-blue-200 rounded-md p-2 mb-3"
      placeholder="mobile"
    />
  </div>
</template>

<script>
export default {
  name: "CustomMultipleInput",
  props: {
    username: String,
    email: String,
    mobile: String,
  },
  // or we can call a function on input and update it in setup function
  //   setup(props, context) {
  //     const updateEmail = (event) => {
  //       context.emit("update:email", event.target.value);
  //     };
  //  return { updateEmail }
  //   },
};
</script>

Step 2: Now create another component MultipleVmodel.vue in which we call custom-input component.

<template>
  <div class="mt-20">
    <custom-multiple-input
      v-model:username="username"
      v-model:email="email"
      v-model:mobile="mobile"
    />

    <div
      class="
        flex flex-col
        text-left
        w-1/3
        bg-indigo-100
        p-3
        rounded
        shadow
        mx-auto
      "
    >
      <p class="font-medium text-indigo-800 mb-3">Value Entered By you:</p>
      <div class="enterValue"><label for="username">Username : </label> {{ username }}</div>
      <div class="enterValue"><label for="email">Email : </label> {{ email }}</div>
      <div class="enterValue"><label for="mobile">Mobile : </label> {{ mobile }}</div>
    </div>
  </div>
</template>

<script>
import CustomMultipleInput from "./CustomMultipleInput.vue";
import { ref } from "vue";
export default {
  components: { CustomMultipleInput },
  setup() {
    const username = ref("");
    const email = ref("");
    const mobile = ref("");

    return { username, email, mobile };
  },
};
</script>

<style>
    .enterValue {
        padding-bottom: 5px;
        font-weight: 500;
    }
</style>

Step 3: Add the MultipleVModel.vue component in App.vue component

<template>
  <MultipleVmodel msg="Hello Vue 3 in CodeSandbox!" />
</template>

<script>
import MultipleVmodel from "./components/MultipleVmodel.vue";
export default {
  name: "App",
  components: {
    MultipleVmodel: MultipleVmodel,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

You can also refer to the demo in the below sandbox. %[ codesandbox ultiple-v-model-in-vue3-mzn2k]