Sync with Multiple v-models in Vue 3 using Composition API

Sync with Multiple v-models in Vue 3 using Composition API

Vue 3 has brought many new features, and the ability to use more than one v-model directive on the same element is one of them. Sync with Multiple v-models in Vue 3 using Composition API. If you would like to learn more tips, advanced patterns, techniques and best practices related to Vue.

This article was originally published at  The Road To Enterprise.

Vue 3 has brought many new features, and the ability to use more than one v-model directive on the same element is one of them. I want to share with you a quick tip on how to handle updating the state of a parent component when using multiple v-models. It’s especially useful when dealing with forms. You can find the full code example in this  GitHub repository.

For this example, we will use a form shown in the image below.

Below you can find the code for it. We have two files — App.vue, which has the form state and renders the Form component. The Form.vue component renders the form element with labels and inputs fields.

App.vue

<template>
  <div :class="$style.container">
    <Form
      v-model:name="form.name"
      v-model:surname="form.surname"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { ref } from 'vue'
import Form from './components/Form.vue'

export default {
  components: {
    Form,
  },
  setup() {
    const form = ref({
      name: '',
      surname: '',
    })

    const onSubmit = () => console.log(form)

    return {
      form,
      onSubmit,

vuejs vue code javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

5 JavaScript tips learned from Vue source code

5 JavaScript Tips I Learned From Vue Source Code - Learn JavaScript from the source code of the popular JS frameworks.

5 JavaScript Tips I Learned From Vue Source Code

Learn JavaScript from the source code of the popular JS frameworks. In this post, you'll see 5 JavaScript Tips I Learned From Vue Source Code

4 Ways You Can Get Rid of Dirty Side Effects for Cleaner Code in JavaScript

4 Ways You Can Get Rid of Dirty Side Effects for Cleaner Code in JavaScript. Bugs are born in many ways. Creating side effects is one of them. Some people say side effects are evil, some say they’re not.

Create QR code by Vue.js

Create QR code by Vue.js .Create QR code powered by Vue.js