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" /> If you want to see what is composition API in Vue 3 you can refer to my previous blog.
Article No Longer Available
.
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 the demo in below sandbox.
🦄 ❤️ Thank you for reading. 🦄 ❤️
Top comments (0)