Multiple v-model in Vue 3
Tags: javascript, vue, womenintech, codenewbie
Published: 2021-12-24 18:04:37

**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.

```js

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

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

```

_If you want to see what is composition API in Vue 3 you can refer to my previous blog._
{% link https://dev.to/snehalk/what-is-composition-api-in-vue-3-157k %}.

**`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.

```js
<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.

```js
<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.

```js
<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

```js
<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 the demo in below sandbox.

{% codesandbox ultiple-v-model-in-vue3-mzn2k %}


:unicorn: :heart: Thank you for reading. :unicorn: :heart: